300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 【完美解决】webpack 升级问题 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

【完美解决】webpack 升级问题 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

时间:2022-01-19 05:02:55

相关推荐

【完美解决】webpack 升级问题 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

我用vue init webpack myvue 新建了一个vue项目,npm run dev能正常启动,

然后我又跟着B站老师安装了webpack和webpack-cli,后来再运行这个项目的时候就报错了:

internal/modules/cjs/loader.js:892

throw err;

^

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

Require stack:

/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)

at Function.Module._load (internal/modules/cjs/loader.js:745:27)

at Module.require (internal/modules/cjs/loader.js:961:19)

at require (internal/modules/cjs/helpers.js:92:18)

at Object. (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)

at Module._compile (internal/modules/cjs/loader.js:1072:14)

at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)

at Module.load (internal/modules/cjs/loader.js:937:32)

at Function.Module._load (internal/modules/cjs/loader.js:778:12)

at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {

code: ‘MODULE_NOT_FOUND’,

requireStack: [

‘/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js’

]

}

package.json配置如下(也是npm安装webpack后的版本,在项目目录下安装完成后会自动更新package.json中的配置)

··

webpack 5.47.1

webpack-cli 4.7.2

webpack-dev-server 3.11.2

··

网上的方法试过很多,都不行,比如修改start,将webpack-cli降级,运行都是各种报错,降级后还出现其他问题,又是一通百度,报错如下:

/Users/xxx/Documents/Vue/myvue/build/webpack.dev.conf.js:52

new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

^

TypeError: webpack.NamedModulesPlugin is not a constructor

at Object. (/Users/xxx/Documents/Vue/myvue/build/webpack.dev.conf.js:52:5)

at Module._compile (internal/modules/cjs/loader.js:1072:14)

at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)

at Module.load (internal/modules/cjs/loader.js:937:32)

at Function.Module._load (internal/modules/cjs/loader.js:778:12)

at Module.require (internal/modules/cjs/loader.js:961:19)

at require (internal/modules/cjs/helpers.js:92:18)

at WEBPACK_OPTIONS (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)

at requireConfig (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)

at /Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17

at Array.forEach ()

at module.exports (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)

at Object. (/Users/xxx/Documents/Vue/myvue/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)

at Module._compile (internal/modules/cjs/loader.js:1072:14)

at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)

at Module.load (internal/modules/cjs/loader.js:937:32)

找来找去都没啥用,反而把系统配置参数弄的乱七八糟。

解决方法

既然当时用vue 创建的项目能够正常运行,那我为什么不还原回去呢?那我就先npm uninstall webpack,npm uninstall webpack-cli.

然后再把package,json文件还原,在项目目录下运行npm install,最后nom run dev,完美解决!

前端一大堆的这种版本问题,让一个后端怎么进步呢?前端的朋友要加油,尽快把这种问题解决,谢谢了!

写在最后:

上面的项目在使用vue init webpack hello-vue创建的项目时不管用,作为一种方式供大家参考。

另外一种方法:

我是在B站跟着狂神学的Vue,他那时候用的Vue2.X,我系统里Vue 版本是2.9.6,但是用npm安装webpack,webpack-cli就会直接安装最新的5.X,不管我怎么指定版本安装,npm audit fix一下就又是最新的。并且老师用的创建项目的命令是:vue init webpack hello-vue,这是V2.X版本使用的方法。

Vue是2.X版本,nodejs版本是V14.X,但是webpack又是最新版本,我觉得是不是两者版本不兼容,所以我就卸载了本地低版本的Vue,下载了最新版本的Vue:$ npm install -g @vue/cli。然后再使用vue-cli3.X创建项目:vue create hello-world,运行npm run serve 成功!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。