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

Question

'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"
  ]

Solution 1

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 2

You could try changing webpack-dev-server to webpack serve in your npm run script inside package.json

Solution 3

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 4

To fix it just do 2 things.

1. Install npm i webpack-cli @webpack-cli/init
2. Add this to your package.json:

   "scripts": {
     "start": "webpack-cli serve --mode development"
   },
   

Done!

Solution 5

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

View more solutions

Comments

[Sh031224]

I already solve this problem, but thanks for your attention.

[Mark]

This is a useful answer particular when your project has these versions webpack": "^5.2.0 webpack-cli": "^4.1.0 webpack-dev-server": "^3.11.0

[Vic B-A]

I had the same issue and I coudnt find a way to solve it... but, this is the perfect answer... and as @Mark said... Works perfect for the versions he mentioned above... Thank you.

[Nikhil]

Thanks for help, I follow all things and many blogs but this work for me. Please add some expansion.

[Necromancer]

This answer saved me! THANKS.

[Phipsen]

I got above error message with rails 6 and yarn. My package.json doesn't have a script command inside. Do you @Gakis41 may know how to handle this?

[Gakis41]

@Phipsen can you share your package.json? Do you have webpack & webpack-cli installed in devDependencies?

[Phipsen]

@Gakis41: I finally found out, that adding coffeescript module was causing all these problems. I set up a new rails project and added the modules one by one. At the coffeescript and coffee-loader module, it failed. In Rails 6, I still start with webpack-dev-server, and this works. I have these versions on package.json: "@webpack-cli/serve": "^1.2.2", "webpack-dev-server": "^3.11.2". I migrated the coffeescripts back to js. Not sure whether coffeescript will survive..

[Rutwick Gangurde]

THIS IS THE ANSWER! Yes, I struggled with package versions, npm logs only to find out that this actually is the cause.

[Konkret]

This answer is more aligned with Webpack official documentation.

[T PHo]

This answer works for me, and I just install Webpack recently, better vote correct for future references