webpack 报错 error: connot find module ‘@vue/cli-plugin-babel/preset‘ from ‘项目路径‘

最新推荐文章于 2025-03-08 20:27:31 发布

大唐荣华

最新推荐文章于 2025-03-08 20:27:31 发布

阅读量3.3w

点赞数 4

分类专栏：大前端文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/weixin_40599109/article/details/108797729

版权

大前端专栏收录该内容

157 篇文章

订阅专栏

报错截图：

在这里插入图片描述

报错原因分析：在 @babel/preset-env 有引用缺失模块并使用

解决办法：

下载对应缺失文件：npm i @vue/cli-plugin-babel -D

文件的具体位置：

在这里插入图片描述

注意：

我们下载的是 npm i @vue/cli-plugin-babel 这个文件包，而不是直接去取文件@vue/cli-plugin-babel/preset。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大唐荣华

关注关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
10
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2/3 - 解决报错Error: Cannot find module ‘babel-plugin-import‘（vue2/vue3报错无babel-plugin-import模块详细解决教程

高级前端工程师

03-04

3850

vue，vue2，vue3，Error: Cannot find module 'babel-plugin-import'，vue报错找不到babel-plugin-import模块，babel-plugin-import，vue运行项目时出现报错，vue打包编译build提示报错，解决vue报错，如何解决在vue网页中出现报错，安装axios依然不行，执行npm install antd babel-plugin-import依然报错怎么办，安装了依然提示报错咋办，The package manager

Error: Cannot find module ‘@vue/babel-preset-app‘ from ‘C:\Users\Administrator\WebstormProjects\memo

郭宝的博客

01-07

8942

背景： Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js): Error: Cannot find module '@vue/babel-preset-app' from 'C:\Users\Administrator\WebstormProjects\memorial' at Function.resolveSync as sync ..

10 条评论您还未登录，请先登录后发表或查看评论

vue运行报错Error: Cannot find module ‘@vue/cli-plugin-babel‘

热门推荐

梦翼横空的专栏

03-09

3万+

原因：当前电脑nodejs版本过高，项目的配置太低，不匹配，如下package.json

遇到Error: Cannot find module ‘@vue/cli-plugin-babel‘

m0_61776359的博客

11-16

4531

yarn run serve 成功启动。

vue3 遇到babel问题（exports is not defined）解决方案

weixin_63023132的博客

03-08

509

由于我在引用ant-design-vue插件，于是产生了下图的问题。

npm错误找不到模块‘@vue/cli-plugin-babel/preset‘

jasonhongcn的专栏

04-13

1048

在此之后，您必须更新您的babel配置。

在Vue 项目中添加element-ui 组件时，出现：Error: Cannot find module ‘babel-preset-es2015‘

c2tband的博客

01-25

4876

Error：Cannot find module 'babel-preset-es2015

in ./src/main.jsSyntax Error: Error: Could not resolve “@vue/cli-plugin-babel/preset“ in file E:\d

qq_43644046的博客

04-23

1097

解决方案：报错因为babel.config.js文件里面使用的文件配置，把对应配置注释，或者百度设置其他配置也可以。

JavaScript高级语法打包 - babel插件安装配置报错！Error: Cannot find module ‘@babel/preset-preset.env‘

←か淡定☆ ヾ的博客

12-12

9382

目录1. 插件安装和配置2. 运行打包 - 报错信息3. 解决办法 1. 插件安装和配置安装babel转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D 安装babel语法插件相关的包： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D 在项目根目录中，创建 babel 配置

bug Error: Cannot find module ‘vue-loader-v16/package.json‘的解决办法

weixin_40945354的博客

03-03

2371

更新，命令如下，在 https://stackoverflow.com/questions/63504594/error-cannot-find-module-vue-loader-v16-package-json 查到 cnpm i --save-dev vue-loader-v16 ivyone@ivyonedeMacBook-Pro daily-cost % cnpm install ⠦ [12/17] Installing source-map@^0.6.1[vue-loader-v16@npm

Error: Cannot find module ‘@babel/core‘ 问题已解决

weixin_55242897的博客

02-26

5128

项目场景： webpack 打包高级js语法时出错打包不成功问题描述：原.babelrc { "persets":["env","stage-0"], "plugins":["transform-runtime"] } 打包运行 npm run dev Error: Cannot find module ‘@babel/core’ … 原因分析：网上查找答案，受EddyWorkHard（https://www.jianshu.com/p/74cb6203c39f）的文章启发了解

Error: Cannot find module ‘@vue/cli-plugin-babel‘

qq_40889256的博客

08-15

1万+

Error: Cannot find module ‘@vue/cli-plugin-babel’

Cannot find module @vue/babel-preset imported from babel-virtual-resolve-base.js

weixin_43466258的博客

08-02

3764

@vue/babel-preset 在 babel-virtual-resolve-base.js文件里面没找到。

vue中Element组件使用报错，Error: Cannot find module ‘babel-preset-es2015‘

nnnooon的博客

01-03

524

vue中Element组件使用报错，Error: Cannot find module 'babel-preset-es2015'

babel-plugin-component 按需引入组件时报错 Parsing error: Cannot find module “babel-preset-es2015“ 的解决办法

UserGuan的博客

12-12

2664

【代码】babel-plugin-component 按需引入组件时报错 Parsing error: Cannot find module 'babel-preset-es2015' 的解决办法。

@vue/cli （四）插件和preset

mutouren_abc的博客

07-08

4492

Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建的项目的 package.json ，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。基于插件的架构使得 Vue CLI 灵活且可扩展。每个 CLI 插件都会包含一个（用来创建文件的）生成器和一个（用来调整webpack核心配置和注入命令的）运行时插件。当你用 vue create

Error Cannot find module ‘@vuecli-plugin-babel‘

web18484626332的博客

03-07

1907

在使用npm run serve命令启动项目时，报找不到某个model的错误解决 1.把原本已生成的node-models删除 2.重新使用npm install命令下载依赖 3.重新启动项目，我这里是npm run serve命令启动的推荐博客：? ? ? ? ? ? ? ? ? (1条消息) Error: Cannot find module ‘@vue/cli-plugin-babel’_hkduan的博客-优快云博客 ...

yarn run serve报错Error: Cannot find module ‘@vue/cli-plugin-babel‘ 的解决办法

Spring Boot-Common On With You

02-27

1万+

关于这个问题，是在构建前端工程的时候遇到的，项目构建完成后，“yarn run serve”启动项目时，出现的问题：“ Error: Cannot find module ‘@vue/cli-plugin-babel‘ ”如下图：具体信息如下： npm install -g @vue/cli-plugin-babel@5.0.8

PS E:\大桥局6公司周转材系统\dqjzzc-six-son-web> depcheck Unused dependencies * @riophae/vue-treeselect * async-validator * avant-transaction * crypto-js * print-js * resize-detector * save-dev * screenfull * v-contextmenu * vue-runtime-helpers * vue-virtual-scroller * vuedraggable Unused devDependencies * @babel/plugin-proposal-nullish-coalescing-operator * @babel/plugin-proposal-optional-chaining * @commitlint/cli * @commitlint/config-conventional * @vue/babel-helper-vue-jsx-merge-props * @vue/babel-preset-jsx * @vue/cli-plugin-babel * @vue/cli-plugin-eslint * @vue/eslint-config-prettier * babel-eslint * babel-plugin-jsx-v-model * babel-plugin-lodash * babel-plugin-syntax-jsx * babel-plugin-transform-vue-jsx * babel-polyfill * eslint-config-prettier * lodash-webpack-plugin * node-sass * postcss * postcss-loader * sass-loader * sass-resources-loader * vue-cli-plugin-element * webpack-cli Missing dependencies * autoprefixer: .\postcss.config.js * @common/store: .\src\views\business-management\main.js * @common/utils: .\src\views\business-management\main.js * @business/utils: .\src\views\business-management\main.js * regenerator-runtime: .\src\views\business-management\main.js * element-ui: .\src\views\business-management\main.js * @business/views: .\src\views\business-management\views\xcgl\xmndy\add-edit\detail-info\index.vue * @business/api: .\src\views\business-management\views\tjfx\components\dthztz.vue * @common/api: .\src\mixins\uploadMixin.js

最新发布

03-22

<think>好的，用户运行了depcheck并得到了依赖项的报告，现在需要解释结果并给出建议。首先，我得分析输出内容，分为未使用的依赖、缺失的依赖，以及可能的解决方案。用户可能不太清楚这些结果的具体含义，所以需要先解释每个部分的含义。比如，未使用的依赖是指项目中没有被引用的包，可以安全移除。而缺失的依赖是项目代码中引用了但未在package.json中列出的，需要安装。接下来，处理未使用的依赖部分。我需要逐个检查这些包，确认它们是否真的未被使用。比如，async-validator常用于表单验证，可能在代码中有动态引入的情况，或者被某些组件间接依赖。类似地，vue-draggable可能在组件库中被引用，但depcheck可能检测不到。这时候需要提醒用户手动检查，避免误删。对于devDependencies中的未使用项，比如各种Babel插件和Vue CLI相关的包，可能是在项目升级或配置变更后遗留下来的。需要确认项目的构建配置是否还需要这些插件，特别是如果项目还在使用Vue 2或特定ES6+语法的话，有些插件可能还是必要的。缺失的依赖部分，autoprefixer在postcss配置中被引用，需要作为devDependency安装。而像element-ui这样的库，在main.js中引用，必须安装，否则会导致运行时错误。其他@common/store等路径可能是项目的别名，需要检查别名配置是否正确，或者这些模块是否存在于项目中，可能需要安装内部模块或调整路径。用户可能需要逐步操作的指导：首先处理缺失的依赖，安装必要的包；然后谨慎移除未使用的依赖，建议逐项确认；最后检查构建配置是否需要更新，比如Babel或Webpack的设置是否需要调整。同时，提醒用户depcheck可能有误报，需结合手动检查和测试验证，确保系统稳定。</think>根据 `depcheck` 的扫描结果，您的项目存在依赖管理问题，分为以下三类： --- ### 一、**未使用的依赖项** #### 1. **生产依赖 (dependencies)** ```markdown * @riophae/vue-treeselect # 未使用的树形选择组件 * async-validator # 表单校验库（常用于Element UI） * avant-transaction # 未知第三方库（需手动确认） * crypto-js # 加密库（可能被注释或动态引入） * print-js # 打印功能库 * vue-virtual-scroller # Vue 虚拟滚动组件 * vuedraggable # 拖拽排序组件（可能被动态加载） ``` **建议**：通过全局搜索代码确认是否被动态加载（如通过 `require()` 或异步引入）。若确认无用，可安全卸载： ```bash npm uninstall package1 package2 ... ``` #### 2. **开发依赖 (devDependencies)** ```markdown * @vue/cli-plugin-* # Vue CLI 相关插件（若已迁移到Vite需删除） * babel-eslint # 旧版Babel解析器（可替换为@babel/eslint-parser） * node-sass # 已弃用的Sass编译器（建议改用sass） * webpack-cli # Webpack命令行工具（若未直接调用可删除） ``` **建议**：检查项目构建配置（如 `vue.config.js`）是否依赖这些包，若无则卸载： ```bash npm uninstall -D package1 package2 ... ``` --- ### 二、**缺失的依赖项** ```markdown * autoprefixer # PostCSS插件（需作为开发依赖安装） * element-ui # UI框架（必须安装，否则会报错） * regenerator-runtime # 支持async/await的运行时库 * @common/store # 项目内部模块（路径别名可能未配置） ``` **解决方案**： 1. 安装明确缺失的包： ```bash npm install autoprefixer element-ui regenerator-runtime ``` 2. 检查路径别名配置（如 `webpack.config.js` 或 `vite.config.js`）： ```javascript resolve: { alias: { '@common': path.resolve(__dirname, 'src/common') } } ``` --- ### 三、**关键问题排查建议** 1. **动态加载的依赖** 使用全局搜索（如 `grep "require(" src/ -r`）检查是否通过 `require()` 或 `import()` 动态引用未识别包。 2. **测试验证** 删除依赖后运行完整构建和功能测试： ```bash npm run build && npm run test ``` 3. **依赖升级风险** 若保留 `@vue/cli-plugin-babel` 等插件，需确保与当前 Vue 2 项目兼容，避免盲目升级到 Vue 3 生态。 --- ### 四、**操作优先级推荐** 1. **立即处理**：安装 `element-ui` 和 `regenerator-runtime`（防止运行时崩溃） 2. **高优先级**：检查 `@common/store` 等内部模块路径配置 3. **低风险优化**：清理未使用的打印（`print-js`）、拖拽（`vuedraggable`）等第三方库建议逐步操作并配合代码审查，避免批量删除导致隐性错误。