Error: Cannot find module 'webpack-cli/bin/config-yargs'
vue.jsWebpackWebpack Dev-Servervue.js Problem Overview
'Github' asked me to update 'webpack-dev-server' to version 3.1.11 or higher for security reasons.
However, 'npm run dev' will not run after the update.
I don't solve this problem
Error: Cannot find module 'webpack-cli/bin/config-yargs'
The code for 'package.json' is as follows.
"dependencies": {
"@vue/cli-plugin-babel": "^3.5.1",
"config": "^3.0.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
vue.js Solutions
Solution 1 - vue.js
You could try changing webpack-dev-server
to webpack serve
in your npm run script inside package.json
Solution 2 - vue.js
For some reason the webpack team changed the command to webpack serve
Change your package.json:
"start": "webpack serve"
Ref: https://github.com/webpack/webpack-dev-server/issues/2759
The version I am using:
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
Solution 3 - vue.js
To fix it just do 2 things.
- Install
npm i webpack-cli @webpack-cli/init
- Add this to your package.json:
"scripts": { "start": "webpack-cli serve --mode development" },
Done!
Solution 4 - vue.js
I agree that you have to upgrade from webpack
3 to 4, but specifically these are the steps I had to do, first, because webpack-cli
has been split out into a separate package:
$ npm install webpack webpack-cli --save-dev
As explained here: https://webpack.js.org/guides/getting-started/#basic-setup
Solution 5 - vue.js
Delete package-lock.json file. Change following in package.json.
"webpack": "^4.32.2",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.11.0"
Run npm install
Solution 6 - vue.js
Change webpack-dev-server
to webpack serve
in package.json file.
e.g.: > "scripts": { "start": "webpack serve --mode development --open" },
It worked for me! ;-)
Solution 7 - vue.js
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
Run: npm run start or npm start now
Solution 8 - vue.js
It is because of version of webpack-cli. In some versions, there is no config-yargs.js file. So ^3.3.11
version of webpack-cli worked for me.
Try it:
npm i webpack-cli@^3.3.11
Solution 9 - vue.js
in your script inside package.json use webpack serve
instead of webpack-devserver
Solution 10 - vue.js
webpack core team says that form version 3+ the compatibility will foucs on webpack 4
so I think you need also to update webpack 3 to webpack 4
this doc may help you to achieve that https://webpack.js.org/migrate/4
Solution 11 - vue.js
You have to check to find out the latest versions of webpack, webpack-cli and webpack-dev-server and when you have that information edit package.json to reflect those versions and run yarn install --check-files Then you'll have to start the webpack-dev-server with the command "npx webpack serve"