vue项目启动报错Cannot find module ‘webpack-cli/bin/config-yargs‘

最新推荐文章于 2024-10-22 15:23:17 发布
原创 最新推荐文章于 2024-10-22 15:23:17 发布 · 555 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #webpack

文章讲述了如何通过降低webpack-cli的版本来解决问题，推荐更新到3.3.12版本，以确保正确安装和使用WebpackCLI。

解决办法

降低webpack-cli版本
npm install webpack-cli@3.3.12

兴芳
关注
npm build报错Cannot find module ‘webpack‘解决方法
邓邓子的博客
05-27 4259
提示：“奔跑吧邓邓子” 的常见问题专栏聚焦于各类技术领域常见问题的解答。涵盖操作系统（如 CentOS、Linux 等）、开发工具（如 Android Studio）、服务器软件（如 Zabbix、JumpServer、RocketMQ 等）以及远程桌面、代码克隆等多种场景。
记一个Error: Cannot find module ‘webpack-cli/bin/config-yargs问题
蛐蛐的博客
07-20 786
1.简介 webpack-dev-server和webpack-cli升级之后报出这个错误 "webpack": "^5.45.1", "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2", "webpack-hot-middleware": "^2.25.0", "webpack-merge": "^5.8.0"..
Cannot find module ‘webpack-cli/bin/config-yargs
alize的博客
11-09 785
启动vue项目时报错:Cannot find module ‘webpack-cli/bin/config-yargs 出现这个错误的原因是webpack与webpack-dev-server的版本不兼容, 解决方法如下: 在本vue项目下输入: npm uninstall webpack -g npm uninstall -g webpack-dev-server 卸载完成后重新安装: npm...
Cannot find module 'webpack/bin/config-yargs'解决方案
热门推荐
心若向阳，无谓悲伤的博客
12-07 3万+
    最近在学习使用命令行创建vue项目，满心欢喜的开始，然后在运行的时候，报了这个BUG: Cannot find module 'webpack/bin/config-yargs' 具体的报错信息是这样的： 经过查询，是由于安装的webpack和webpack-dev-server版本不匹配导致的，所以首先尝试了在命令行卸载webpack-dev-server，然后安装指定的...
Vue启动报错 Cannot find module 'webpack/bin/config-yargs'
weixin_33769125的博客
04-18 2459
项目背景是 使用Vue开发SPA单页面应用 鳖废话，先上错误 Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module....
Error: Cannot find module ‘webpack/bin/config-yargs‘ 报错原因, webpack@4.X踩的坑~
飞翔的熊blabla
09-22 9865
1 、使用webpack@4.32.2时,当我通过package.json的script去执行webpack-dev-server时, 报以下错误:　　 Error: Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/mod..
输入指令npx webpack-dev-server报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法
p1967914901的博客
01-21 916
输入指令npx webpack-dev-server报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法 输入指令：npx webpack-dev-server显示如下报错信息： C:\Users\ASUS\Desktop\JavaScript 代码\webpack实验>npx webpack-dev-server internal/modules/cjs/loader.js:983 throw err; ^ Err
vue的问题1:Cannot find module ‘webpack/bin/config-yargs‘
小黄呀呀呀的博客
10-19 265
问题:Cannot find module ‘webpack/bin/config-yargs’ 解决方法:将版本改成这样 "webpack": "^4.8.3", "webpack-cli": "3.3.0", "webpack-dev-server": "^3.1.4"
npm build报错Cannot find module ‘html-webpack-plugin‘解决方法
邓邓子的博客
05-27 3064
缺少 html-webpack-plugin 模块。
npm报错Cannot find module ‘webpack‘ Require stack
邓邓子的博客
03-06 8703
Error: Cannot find module '@vue/cli-plugin-babel' Require stack: - /usr/local/node-v14.18.2-linux-x64/lib/node_modules/@vue/cli-service/lib/Service.js - /usr/local/node-v14.18.2-linux-x64/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js at Func
vue文件报Cannot find module ‘webpack/lib/RuleSet‘错误处理
jiangjiang1989的博客
10-22 5336
我的项目报错是因为node版本和webpack版本不匹配，node版本降级到12，通过npm list webpack命令查询所对用的版本，更新完后启动正常。检查 webpack 配置：确保你的 webpack 配置文件中正确配置了 RuleSet。清除缓存：有时，清除缓存可以解决此问题。// 加载器或插件规则。
npm报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
enthan809882的博客
12-23 406
报错信息： Error: Cannot find module ‘webpack-cli/bin/config-yargs’ 是没有安装webpack-cli的原因，卸载并安装下即可。 命令： # 卸载，安装webpack npm uninstall webpack -g npm uninstall webpack -D npm install webpack@^4.0.0 -g npm install webpack@^4.0.0 -D 注： 在package.json目录下，安装单独包会修改pa
Error: Cannot find module ‘webpack-cli/bin/config-yargs’
bosstting的博客
03-10 256
Error: Cannot find module 'webpack-cli/bin/config-yargs’ 原因：webpack-cli 和 webpack-dev-server版本不兼容导致。 在我的项目中，直接下载yarn add webpack webpack-cli --dev 会采用下载最新版本，因为导致webpack-cli 和 webpack-dev-server版本不兼容。 解决:降低webpack-cli的版本【由4降为3】 1、卸载webpack-cli： yarn remove
webpack启动服务报错Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_38914807的博客
02-04 254
安装webpack-dev-server 启动命令 npm install webpack webpack-cli webpack-dev-server -D 默认装的是最新版本啦，本人用的webpack5.0版本。 在package.json中添加 "scripts": { "start": "webpack-dev-server --open", "dev": "webpack --mode development", "build": "webpack --mode pr.
启动vue项目时出现:Cannot find module 'webpack-cli/bin/config-yargs'报错解决
MyDilrabaSister的博客
09-10 4991
启动vue项目时报错:Cannot find module ‘webpack-cli/bin/config-yargs’, 如下图: 出现这个错误的原因是webpack与webpack-dev-server的版本不兼容, 解决方法如下: 在本vue项目下输入: npm uninstall webpack -g npm uninstall -g webpack-dev-server 卸载完成后重...
Error: Cannot find module ‘webpack/bin/config-yargs‘
风烟
08-24 2827
说我目前webpack5没有这个webpack-dev-server这个事webpack2或者3才有的东西，那说明现在启动方式还是不对，不能用这个webpack-dev-serevr启动，仔细发现我本地的package.json里面的不对，版本还是老的，我需要卸载重新安装才行。改完之后发现还是报错，但是提示需要安装webpack-cli，然后就安装下。看起来就是webpack语法的问题了，我尝试修改下。尝试装下试试，但是安装又报版本的错误。直接搜索，需要将启动语法从原来的。装了之后启动，然后报新的错误。
Error: Cannot find module 'webpack/bin/config-yargs'
朽木自雕的博客
12-01 643
报错信息：Error: Cannot find module 'webpack/bin/config-yargs' 报错原因：安装的webpack和webpack-dev-server版本不匹配 解决办法：输入npm update
Vue项目启动报错：Cannot find module 'D:\VSCode\ulike-hrm-front\node_modules\webpack-dev-server\bin\webpack-dev-server.js'Cannot find module
最新发布
11-04
<think>我们正在处理一个Vue项目启动时报错的问题，具体错误是：Cannot find module 'D:\VSCode\ulike-hrm-front\node_modules\webpack-dev-server\bin\webpack-dev-server.js' 根据错误信息，系统找不到位于项目node_modules目录中的webpack-dev-server模块的入口文件。这通常意味着webpack-dev-server没有正确安装，或者安装后出现问题。 参考提供的引用： - 引用[1]提到类似找不到模块的错误，解决方案是确保正确安装该模块并在配置文件中正确引用。 - 引用[2]提到了权限问题，但我们的错误是找不到模块，不是权限问题。 - 引用[3]是关于找不到babel-preset-es2015，但解决方案中提到配置文件的处理。 - 引用[4]是关于依赖找不到，但与本错误不同。 结合常见原因，可能的原因及解决方案如下： 1. **依赖未正确安装**：可能由于package.json中依赖不完整，或者安装过程中断导致webpack-dev-server没有安装。 2. **node_modules目录损坏**：可能由于安装问题导致node_modules中部分依赖损坏或缺失。 3. **路径问题**：项目路径中包含特殊字符或空格，导致模块路径解析错误（但Windows系统通常能处理路径中的空格，不过仍有可能）。 4. **依赖版本冲突**：不同依赖对webpack-dev-server的版本要求不同，导致安装的版本不符合预期。 **解决方案步骤：** **步骤1：验证依赖是否存在** 检查项目中的package.json文件，确认是否在devDependencies中列出了`webpack-dev-server`。如果不存在，需要添加并安装。 **步骤2：重新安装node_modules** 通常，删除node_modules目录并重新安装依赖可以解决此问题。 ```bash # 删除node_modules rm -rf node_modules # 在Linux/macOS下 # 在Windows下，可以使用以下命令： rd /s /q node_modules # 清除npm缓存（可选，有时缓存可能导致问题） npm cache clean --force # 重新安装依赖 npm install ``` **步骤3：检查全局安装的影响** 有时全局安装的包可能会干扰项目，但通常Vue项目推荐使用项目本地安装的包。确保没有全局安装的webpack-dev-server与本地冲突。 **步骤4：检查项目路径** 确认项目路径是否包含特殊字符或空格，尽量将项目放在简单路径下（如`D:\projects\my-project`）。 **步骤5：检查文件系统权限** 确保当前用户对项目目录有读写权限。在Windows系统中，右键文件夹->属性->安全，检查用户权限。 **步骤6：检查脚本命令** 在package.json中，检查启动命令（如`npm run dev`）是否指向了正确的脚本。通常Vue项目启动命令是`vue-cli-service serve`，但在一些老项目中可能直接使用`webpack-dev-server`。如果是这样，确保命令正确。 **步骤7：更新或降级依赖** 如果上述步骤无效，可能是版本问题。尝试更新或降级webpack-dev-server版本： ```bash npm install webpack-dev-server@latest --save-dev # 安装最新版本 # 或者指定版本 npm install webpack-dev-server@3.11.0 --save-dev ``` **步骤8：检查webpack配置文件** 如果项目中直接使用webpack-dev-server命令，确保webpack配置文件（如webpack.config.js）存在且配置正确。 **步骤9：使用Vue CLI命令** 如果项目是通过Vue CLI创建的，应该使用Vue CLI自带的命令来启动，而不是直接调用webpack-dev-server。通常启动命令为： ```bash npm run serve # 或 npm run dev ``` 在package.json中，scripts部分应该类似于： ```json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } ``` **步骤10：检查错误日志** 查看完整的错误输出，可能有更多线索。 根据引用[1]的思路，确保模块安装正确。因此，重点执行步骤1和2。 **额外提示**：如果使用yarn，可以尝试用yarn安装（先确保已安装yarn）： ```bash yarn install ``` 以上是针对该问题的完整解决方案步骤。通常，重新安装node_modules能解决大部分问题。 §§相关问题§§ 1. Vue项目中如何正确管理node_modules依赖？ 2. 如何解决npm安装过程中的常见错误？ 3. Vue CLI创建的项目启动流程是怎样的？ </think>针对Vue项目启动时出现`Cannot find module '...\node_modules\webpack-dev-server\bin\webpack-dev-server.js'`错误，以下是系统性的解决方案： ### 核心解决方案 1. **重新安装依赖**（90%的解决方案）： ```bash # 删除现有依赖 rm -rf node_modules package-lock.json # 清除npm缓存 npm cache clean --force # 重新安装依赖 npm install ``` 2. **单独安装缺失模块**： ```bash npm install webpack-dev-server@^3.11.0 --save-dev npm install webpack-cli --save-dev # 常需同时安装 ``` ### 进阶排查步骤 3. **权限修复**（参考引用[2]）： ```bash # 修复node_modules权限（Linux/macOS） sudo chmod -R 777 node_modules # Windows需右键VSCode用管理员身份运行 ``` 4. **配置文件修复**（参考引用[3]）： 检查项目根目录配置文件： - `babel.config.js` 需包含预设配置： ```javascript module.exports = { presets: ["@babel/preset-env"] } ``` - `package.json` 确保存在： ```json "devDependencies": { "@babel/core": "^7.0.0", "webpack-dev-server": "^3.11.0" } ``` 5. **路径符号处理**（Windows特有）： - 将项目路径中的空格和括号改为下划线（如 `D:\VSCode\ulike_hrm_front`） - 或在`package.json`中转义路径： ```json "scripts": { "dev": "node \"node_modules/webpack-dev-server/bin/webpack-dev-server.js\"" } ``` ### 最终验证 ```bash # 检查模块是否真正安装 ls node_modules/webpack-dev-server/bin # 应看到.js文件 # 尝试直接运行模块 node node_modules/webpack-dev-server/bin/webpack-dev-server.js ``` > **根本原因**：该错误通常由三种情况导致： > 1. `webpack-dev-server`未安装（占60%） > 2. `node_modules`损坏或权限问题（占30%） > 3. 路径包含特殊符号导致模块解析失败（占10%）[^1][^2]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值