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

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

Please excuse me for not putting all the codes because "It looks like your post is mostly code; please add some more details." — Sh031224, Jan 06 '20 at 11:50
It was 2.11.5. And what is the updated version? webpack-dev-server update? — Sh031224, Jan 06 '20 at 12:25
2.x.x -> 3.x.x is a [major](https://semver.org/) version update, so it may not be compatible with the rest of your dependencies. I suggest to review the vulnerability report and in case it's something minor or improbable to revert the update. — yuriy636, Jan 06 '20 at 15:12

score 132 · Answer 1 · answered Oct 11 '20 at 12:28

132

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

answered Oct 11 '20 at 12:28

Gakis41

1,451
2
9
11

24

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` – Mark Oct 23 '20 at 11:46
1

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. – Vic B-A Oct 27 '20 at 18:49
This answer saved me! THANKS. – Zin Minn Nov 26 '20 at 06:21
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? – Phipsen Jan 27 '21 at 08:16
@Phipsen can you share your package.json? Do you have webpack & webpack-cli installed in devDependencies? – Gakis41 Jan 28 '21 at 11:37
@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.. – Phipsen Jan 28 '21 at 15:37
THIS IS THE ANSWER! Yes, I struggled with package versions, npm logs only to find out that this actually is the cause. – Rutwick Gangurde Feb 15 '21 at 09:59

score 27 · Answer 2 · answered Dec 08 '20 at 11:34

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"

score 19 · Answer 3 · edited Nov 01 '20 at 08:55

19

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!

edited Nov 01 '20 at 08:55

janw

5,204
5
24
43

answered Oct 31 '20 at 14:39

Ferney E. Barón

191
1
3

1

Thanks for help, I follow all things and many blogs but this work for me. Please add some expansion. – Nikhil Nov 03 '20 at 10:52

user8128167 · Accepted Answer · 2020-07-17T16:40:09.260

18

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

edited Jul 17 '20 at 16:40

answered May 15 '20 at 01:01

user8128167

5,380
6
53
70

score 14 · Answer 5 · answered Oct 14 '20 at 05:51

14

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

answered Oct 14 '20 at 05:51

Chakresh Sahu

161
1
4

thanks worked for me – hassan khademi May 04 '21 at 13:28

score 3 · Answer 6 · edited Nov 21 '20 at 09:13

3

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

edited Nov 21 '20 at 09:13

Sylvaus

751
3
12

answered Nov 20 '20 at 16:29

Recep Öztürk

41
3

This worked for me. – Asfiya Shaikh May 29 '21 at 17:40

score 3 · Answer 7 · answered Mar 14 '21 at 21:10

3

in your script inside package.json use webpack serve instead of webpack-devserver

answered Mar 14 '21 at 21:10

MD SHAYON

2,833
21
18

score 3 · Answer 8 · answered May 07 '21 at 18:15

3

Change webpack-dev-server to webpack serve in package.json file.

e.g.:

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

It worked for me! ;-)

answered May 07 '21 at 18:15

Nomado

31
1

score 2 · Answer 9 · answered Jan 03 '21 at 23:45

2

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

Run: npm run start or npm start now

answered Jan 03 '21 at 23:45

Mehdi

29
3

score 1 · Answer 10 · answered Jan 06 '20 at 13:13

1

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

answered Jan 06 '20 at 13:13

Ayman Morsy

873
5
18

I already solve this problem, but thanks for your attention. – Sh031224 Oct 13 '20 at 05:31

score 0 · Answer 11 · answered Apr 21 '21 at 05:51

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"

score -1 · Answer 12 · answered Nov 15 '20 at 22:18

This process work for me

1 - Run your Command Invite/Terminal as Administrator

2 - Install the Vue CLI globally with the command :

npm install -g vue-cli

3 - Create your vue project

vue init webpack your_project_name_here

4 - Goto your project directory you

cd your_project_name_here

5 - If you have vulnerabilities execute :

npm audit fix

Now you can start the web server in development mode by using npm in the following way:

npm run dev

By default it will start the server on port 8080

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

12 Answers12

Linked