报错：Uncaught Error: Cannot find module ‘core-js/library/fn/object/assign‘

最新推荐文章于 2023-07-16 23:46:50 发布
原创 最新推荐文章于 2023-07-16 23:46:50 发布 · 2.9k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #node.js #vue.js #vuepress

本文介绍了解决VuePress项目中使用Element-UI出现的兼容性问题，主要是由于core-js版本冲突导致。提供了两种解决方案：一是降低core-js版本至2.x；二是安装特定版本的async-validator。

情况描述：

在项目中，vuepress写文档说明时，加载element-ui报错 

enhanceApp.js文件中，将Vue.use(ElementUI);注释掉就不报错了，但我要利用elementui做demo，所以是必须要加上的

原因：

项目中的core-js的版本不同所致，我的项目core-js是3.x的，vuepress中运行element要2.x

解决方法：

两个办法：

1、如果不影响的话，将项目中的core-js降为"core-js": "^2.6.12"（亲测有效）

2、项目的core-js版本不能改变：npm install async-validator@1.11.5 （亲测有效）

解决vuepress报Error: Cannot find module ‘core-js/library/fn/object/assign问题（core-js版本与引入UI冲突问题）
wocwin的博客
11-30 5767
问题如图 原因 core-js版本原因 解决方案 第一种，在config文件（路径docs.vuepress\config.js）中加上以下代码 chainWebpack (config) { config.resolve.alias.set('core-js/library/fn', 'core-js/features'); }, 第二种，直接安装core-js2*的版本 npm install core-js@2.x 最后 基于ElementUi再次封装基础组件gitee码云地址
引用element-ui时报错：Uncaught Error: Cannot find module 'throttle-debounce/debounce'...
weixin_41218265的博客
04-27 5484
可能有点啰嗦，弄了好几个小时，成功后真的心情太复杂了（此处苦涩微笑脸）。 安装、引用都是完全按照官方文档来的，也不是第一次用element-ui，但就这次这么与众不同（此处苦涩微笑表情），报错如下： 百度了解决方法，跟我一样报这个错的寥寥无几，看了别人的建议：(https://ask.csdn.net/questions/752775) 有说可能是依赖丢失了让删除整个node_modul...
【vuepress】解决vuepress在使用Element-UI时, 报Error: Cannot find module ‘core-js/library/fn/object/assign问题
Trees__的博客
07-16 1080
在使用vuepress框架的时候，先要引入其他的UI组件库，用于快速搭建网站，但是出现解决vuepress报 Error: Cannot find module ‘core-js/library/fn/object/assign 问题
element-ui时报错Cannot find module ‘core-js/library/fn/object/assign
wfly blog
01-18 1745
安装依赖yarn add async-validator@1.11.5 / npm installasync-validator@1.11.5就可以解决问题了！
vuepress加载element-ui时报错Cannot find module ‘core-js/library/fn/object/assign
qq_32855007的博客
09-22 7218
搭建vuepress文档，想要在文档中展示我基于element ui写的组件demo，故创建文件enhanceApp.js enhanceApp.js的配置如下 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import demos from '../../src/examples' import Components from '../../src/packages' functio
elementUI报错找不到依赖 core-js/library/fn/object/assign in ./node_modules/babel-runtime/core-js/object/ass
weixin_46653941的博客
10-09 4144
全局导入elementUI时总是报错说找不到和core-js相关的依赖，类似：core-js/library/fn/object/assign in ./node_modules/babel-runtime/core-js/object/assign.js，找了好多解决方案，最终有效解决的方案如下： 首先，升级core-js，执行命令npm install core-js@3 --save 然后再执行npm install async-validator...
报错：Uncaught SyntaxError: Cannot use import statement outside a module 详解
01-07
JS错误Uncaught SyntaxError: Cannot use import statement outside a module< 分析及解决方法 错误信息： 错误分析： HTML 网页中，浏览器通过 script 标签加载 JavaScript 脚本。由于浏览器脚本的默认语言是 ...
webpack打包提示: Uncaught Error: Cannot find module ‘strip-ansi‘
sidishd的博客
02-19 1955
webpack打包提示: Uncaught Error: Cannot find module ‘strip-ansi’ 项目场景： webpack打包提示: Uncaught Error: Cannot find module ‘strip-ansi’ 问题描述： ERROR in (webpack)-dev-server/client?http://localhost:8080 Module not found: Error: Can't resolve './overlay' in 'F:\webpa
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
文件查找失败：‘core-js/library/fn/object/assign‘
cv1002420186的博客
04-26 724
uniapp引用到element的时候，先安装npm i element-ui -S，这个是不够的，会报错，还需要安装脚手架。
core-js报错
01-07
报错： Can’t resolve ‘E:\……\node_modules\core-js\modules\es.array.iterator.js’ 原因： core-js版本问题，下载最新版本core-js即可。 解决过程： 1、查看node_modules下没有core-js，于是安装npm i core-js@2，还是报错！！ 2、再查看node_modules下的core-js，里面确实没有es.array.iterator.js。 3、查看package-lock.json文件，里面引用的都是3以上的版本，比如 package-lock.json： dependencies:
Cannot find module ‘core-js/core/object‘
m0_69301850的博客
07-26 774
core-js版本问题。
Error: Cannot find module 'core-js/fn/array/values' at Function.Module._resolveFilename (module
weixin_30847865的博客
06-05 1412
E:\codeBase\top605\rescue-master\server\node_modules\_log4js@1.1.1@log4js\lib\log4js.js:321 throw new Error( ^ Error: Problem reading log4js config { appenders: [ { type: 'console', ...
npm 报错 Cannot find module 'core-js/modules/es6.regexp.constructor'
热门推荐
小羽向前跑
11-15 3万+
不识别es6语法 cnpm install core-js@2 安装淘宝镜像
控制台报错--Module not found: Error: Can‘t resolve ‘core-js/fn/promise‘
weixin_59907064的博客
10-05 1882
在文件中使用promise ，出现以下错误，将 import {reject,resolve} from 'core-js/fn/promise'注释掉即可
Error: Cannot find module 'core-js/library/fn/get-iterator'解决方案
yhy_的博客
02-02 1万+
把node_modules 删了 重新  cnpm install 或者 npm install 安装一下就可以解决了 据我分析可能是npm包的问题。
VUE解决Module not found: Error: Can‘t resolve ‘core-js/modules/es.error.cause.js‘ in‘xxxxx’
m0_60336681的博客
06-27 2258
VUE解决Module not found: Error: Can't resolve 'core-js/modules/es.error.cause.js' in‘xxxxx’
babel编译ES6报错Cannot find module ‘core-js/modules/web.dom-collections.iterator.js‘
Lofan 的博客
01-19 9705
解决方案： 降低core-js的版本即可 先删掉node_modules下的core-js文件夹，并删除package-lock.json文件，这文件会锁定版本，导致安装无效，并删掉package.json里core-js的版本。 // 这个安装完，会装@2的最新版本 "core-js": "^2.6.12" npm install core-js@2 // 降版本之后package.json里core-js的版本是这个： "dependencies": { "core-js": "^2.6.12
Error: Cannot find module 'core-js/library/fn/get-
weixin_34249678的博客
03-04 2391
2019独角兽企业重金招聘Python工程师标准>>> ...
main.js:2 Uncaught Error: Cannot find module 'vant/es/navbar/style'
最新发布
05-07
<think>好的，用户现在的问题是main.js中无法找到模块'vant/es/navbar/style'，需要解决这个问题。首先，我需要回忆之前给出的解决方案，并结合用户提供的引用内容来调整回答。 用户提到参考的引用中，引用了Vant的自动导入配置和样式引入，这可能涉及到babel-plugin-import的使用。根据用户之前的错误，可能的问题点有几个： 1. **路径错误**：用户可能错误地引用了组件样式路径。Vant的组件路径通常是kebab-case，比如'nav-bar'而不是'navbar'。检查用户是否在引入时拼写错误。 2. **自动导入配置不正确**：在用户提供的引用[2]中，使用了babel-plugin-import插件，但配置是否正确？需要确认libraryDirectory是否为'es'，以及style设置是否开启。如果配置正确，自动导入应该处理样式，无需手动引入。 3. **依赖安装问题**：用户是否安装了正确版本的Vant？如果Vant未安装或版本过低，可能导致模块找不到。需要建议用户检查安装情况。 4. **构建工具配置**：用户使用的是Vite还是Webpack？如果是Vite，可能需要使用unplugin-vue-components插件，而不是babel-plugin-import。而Webpack项目则需要正确配置less-loader和babel插件。用户之前的回答中提到了两种配置方式，需要根据用户实际使用的工具调整。 5. **样式处理器配置**：用户是否正确安装了less和less-loader？如果缺少这些依赖，即使路径正确，构建工具也无法处理样式文件，导致模块找不到。 接下来，需要结合用户当前的错误信息，逐步排查这些可能的问题点。例如，用户手动引入'vant/es/navbar/style'时出现错误，可能是因为路径中的组件名应为'nav-bar'而非'navbar'。此外，如果用户配置了自动导入插件，可能不需要手动引入样式，因此需要检查插件配置是否正确。 另外，用户提供的引用[3]中提到了SCSS的全局配置，这可能与问题无关，但需要注意用户是否混淆了Less和SCSS的配置，确保使用的是正确的预处理器。 最后，需要给出具体的解决步骤，包括检查路径拼写、确认自动导入配置、安装必要依赖、检查构建工具配置等，并提醒用户根据实际使用的工具（如Vite或Webpack）选择合适的配置方式。同时，提供验证步骤，确保问题解决。</think>### 分步解决方案：Vant组件样式模块解析失败问题 --- #### 一、核心问题定位 出现`Cannot find module 'vant/es/navbar/style'`的根本原因通常为以下三点： 1. **组件名拼写错误**：Vant组件路径使用kebab-case命名（如`nav-bar`而非`navbar`） 2. **自动导入未启用**：未正确配置按需加载插件（babel-plugin-import或unplugin-vue-components） 3. **依赖版本冲突**：Vant版本低于4.x或构建工具链不完整 --- #### 二、具体解决步骤 ##### 方案1：手动引入（临时验证） ```javascript // main.js（修正组件名拼写） import 'vant/es/nav-bar/style' // 注意正确的kebab-case命名[^1] import { NavBar } from 'vant' app.use(NavBar) ``` ##### 方案2：配置自动导入（推荐） ```javascript // babel.config.js（Webpack项目） module.exports = { plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: (name) => `${name}/style/less` // 关键配置项[^2] }, 'vant' ] ] } ``` ```javascript // vite.config.js（Vite项目） import { VantResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ Components({ resolvers: [VantResolver({ importStyle: 'less', // 启用样式自动导入 resolveIcons: true })] }) ] }) ``` ##### 方案3：依赖完整性检查 ```bash # 清除旧依赖并安装必要包 rm -rf node_modules package-lock.json npm install vant@latest --save npm install less less-loader@^10 --save-dev # Webpack项目需要 npm install @vitejs/plugin-vue unplugin-vue-components --save-dev # Vite项目需要 ``` --- #### 三、关键配置验证点 | 配置项 | 正确值示例 | 错误值示例 | 检测命令 | |----------------------|-------------------------|----------------|-------------------------| | Vant版本 | ^4.5.0 | ^3.0.0 | `npm list vant` | | 组件路径 | vant/es/nav-bar/style | vant/lib/navbar | 查看node_modules目录结构 | | less-loader版本 | ^10.0.0 (Webpack) | ^8.0.0 | `npm list less-loader` | --- #### 四、进阶问题排查 **场景1：Webpack项目特殊配置** ```javascript // vue.config.js module.exports = { transpileDependencies: ['vant'], // 强制Babel转译 css: { loaderOptions: { less: { modifyVars: { hack: `true; @import "~vant/es/style/theme.less";` // 主题变量注入[^3] } } } } } ``` **场景2：TypeScript路径映射** ```json // tsconfig.json { "compilerOptions": { "paths": { "vant/es/*": ["./node_modules/vant/es/*"] } } } ``` --- #### 五、验证方案有效性 1. 创建测试组件： ```vue <!-- src/components/TestVant.vue --> <template> <van-nav-bar title="测试标题" left-text="返回" /> </template> ``` 2. 观察控制台是否出现样式缺失警告 3. 检查构建产物中是否包含`nav-bar`相关样式代码 --- ### 相关问题扩展 1. 如何实现Vant组件的国际化配置？ 2. Vant4.x版本相比3.x有哪些破坏性变更？ 3. 在Nuxt.js中如何正确集成Vant组件库？ 4. 如何解决Vant图标组件加载失败的问题？ --- [^1]: Vant官方组件目录结构规范 [^2]: babel-plugin-import配置文档 [^3]: Vant主题定制开发指南
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪落满地香

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值