Cannot find module 'webpack/bin/config-yargs'

Question

Getting error when running webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/. Here is the error log:

module.js:442
throw err;
^

Error: Cannot find module 'webpack/bin/config-yargs'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

one is global version, one is local version. when webpack-dev-server, local version is used as well. npm install --save webpack-dev-server@3.11.0 did the job. — MartianMartian, Mar 17 '18 at 05:21

Serhii Matrunchyk · Answer 1 · 2021-09-12T09:22:26.327

580

If you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.

Example:

"serve": "webpack serve --config config/webpack.dev.js --progress"

You might want also check this comment on GitHub:

NPM package.json scripts are a convenient and useful means to run locally installed binaries without having to be concerned about their full paths. Simply define a script as such:

For webpack-cli 3.x:
"scripts": {   "start:dev": "webpack-dev-server" }
For webpack-cli 4.x:
"scripts": {   "start:dev": "webpack serve" }

edited Sep 12 '21 at 09:22

answered Oct 05 '20 at 09:07

Serhii Matrunchyk

9,083
6
34
47

16

Do you mean changing `webpack-dev-server` to `webpack serve`? – Newbyte Oct 19 '20 at 19:48
7

Yes, if you are on webpack 4 – Serhii Matrunchyk Oct 20 '20 at 07:06
I followed your suggeston but I am getting this ReferenceError: UnhandledPromiseRejectionWarning: ReferenceError: HtmlWebpackPlugin is not defined at Object. (D:\testingWebpack\webpack.config.js:20:16). The line 20 is: plugins: new HtmlWebpackPlugin({ template: "./src/index.html" }), while the HtmlWebpackPlugin is actually defined at the top as: const HtmlWebPackPlugin = require("html-webpack-plugin"); So I do not understand what should I do. – Andrea D_ Dec 22 '20 at 08:23
@Lomono HtmlWebpackPlugin is something not relevant to the subject. Please ask a new question with the config you're using and feel free to post the link here. – Serhii Matrunchyk Jan 10 '21 at 17:36
6

this also works when combining webpack 5, webpack-cli 4 and webpack-dev-server 3 (the version treadmill never ends) – worc Jan 28 '21 at 14:47
1

[webpack-cli] Error: Unknown option '--watch' – liby Feb 18 '21 at 10:01
1

Don't use `--watch` with `serve` it doesn't make any sense. https://github.com/webpack/webpack-cli/issues/2401#issuecomment-772409309 – liby Feb 19 '21 at 06:51
This worked for me too, should be the accepted answer. webpack@^4.26.0 and webpack-cli@^4.5.0 – jzybert Mar 02 '21 at 15:13
``` > webpack serve --config webpack.hot.config.js --progress error: unknown option '--config' ``` Unknown option `—config` now. – Anton Starcev May 27 '21 at 17:45
You shall update `webpack-cli` as well. At least in my case. – Rahul Dahal May 31 '21 at 03:36
Worked for me, I am sure these changes are made for fun to break your apps, I am sure they will rename it to something else again soon. – fires3as0n Aug 12 '21 at 10:10
When I run `webpack serve` I get `Module not found: Error: Can't resolve 'serve'`, I think the API changed? I can bypass this issue with `concurrently --kill-others --raw \"webpack --watch --progress --colors --config webpack.config.js\" \"serve www\"` after installing _concurrently_ and _serve_. – Martin Braun Apr 05 '22 at 11:12
Okay I found the solution, my project is still on Webpack 3 and I have to install `webpack-dev-server@2` and start it like so: `webpack-dev-server --watch --progress --colors --config webpack.config.js` – Martin Braun Apr 06 '22 at 09:07

score 91 · Answer 2 · answered Jan 06 '21 at 06:28

91

Jan 2021

Using webpack 5, just replace the webpack-dev-server command with webpack serve

answered Jan 06 '21 at 06:28

Zach Smith

8,458
13
59
133

14

And also don't remove `webpack-dev-server`, `webpack serve` needs it. – fsevenm Jan 10 '21 at 05:01
3

Wait, it does work, but from their official [migration tutorial](https://webpack.js.org/migrate/5/), we get this: `serve is removed in favor of DevServer`. Is this really the recommended approach? Thanks. – cbdeveloper Jan 19 '21 at 09:49
3

@cbdeveloper apparently yes, according to webpack-dev-server [latest docs](https://github.com/webpack/webpack-dev-server#with-npm-scripts) as well. – villasv Jan 20 '21 at 16:38
I don't use webpack-dev-server as command, I use it in webpack.config. I have entry `'webpack-dev-server/client?http://localhost:${port}/'` but I have a same error – Illorian Jan 26 '21 at 16:03
Tangential but if you are using Rails and `@rails/webpacker`, and you are OK with `webpack 4.x` for now, try `rails webpacker:install`. [details](https://github.com/rails/webpacker/issues/2905#issuecomment-792092215) – floer32 Mar 06 '21 at 23:22

score 52 · Accepted Answer · answered Dec 16 '16 at 10:24

52

I've had a similar problem. I think it's related to webpack version. After changing webpack version the latest everything was fine...

answered Dec 16 '16 at 10:24

Nikola Spalevic

1,082
13
18

25

Also worth checking `webpack --version` from cli if you've got it installed globally. – cwharris Feb 16 '17 at 17:12
Changing webpack to the latest causes this for me: https://stackoverflow.com/questions/61937054/npm-run-dev-fails-validationerror-invalid-options-object – kev May 24 '20 at 05:44
12

2020 Update: downgrading to previous versions is not a very good solution, please checkout @serhii-matrunchyk answer below – Hollyol Oct 27 '20 at 09:42
31

This solution won't work for anyone who wants to use webpack-dev-server because it's not compatible with webpack 5. So what you need to do instead is uninstall existing webpack-cli version and then install webpack-cli version 3.3.8 with "npm install webpack-cli@3.3.8 -D". My webpack version is 4.44.2 and dev-server version is 3.11.0 if anyone's wondering. – Aj_ Nov 28 '20 at 21:47
8

This worked for me: https://stackoverflow.com/a/65268634/1112656 – ipegasus Dec 12 '20 at 18:53
3

The answer below worked about using "webpack serve" instead of "webpack-dev-server" – mattyb Dec 14 '20 at 23:49
Make sure `webpack`, `webpack-cli`, and `webpack-dev-server` are all up to date, and everything should be good. – trusktr Feb 05 '21 at 00:49
22

@cwharris Apparently your comment has deemed the title of "unsung hero" as being the 6th most copied comment across all of StackOverflow while only having a score of 5 (scroll to the end): https://stackoverflow.blog/2021/04/19/how-often-do-people-actually-copy-and-paste-from-stack-overflow-now-we-know/ – Pluto Apr 20 '21 at 17:10

Shivam Modi · Answer 4 · 2021-03-13T15:43:57.733

31

Update: March 21

Try to update your webpack dependencies with the following command

npm install --save-dev webpack webpack-cli webpack-dev-server

if it does not work then use as following

I am having these dependencies but I faced the same issue

"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"

And I found a solution that adding a new script or in your Start Script in package.json worked for me. So you can try this way as well.

"dev": "webpack serve --mode development --env development"

edited Mar 13 '21 at 15:43

answered Nov 25 '20 at 06:38

Shivam Modi

379
3
5

Your solution worked. Did you find out why webpack-dev-server is failing? – Rush W. Dec 15 '20 at 17:41
Could you just run ```yarn upgrade``` – Mices Apr 18 '21 at 20:14

Anand Raja · Answer 5 · 2021-12-29T18:18:47.047

18

This is because of the changes in webpack-cli version.

If the webpack-cli version is less than 4.x, You can use webpack-dev-server
If the webpack-cli version is 4.x or higher, you can use webpack serve

For webpack-cli 3.x and below

    "scripts": {
      "dev-server": "webpack-dev-server"
    }

For webpack-cli 4.x and above

    "scripts": {
      "dev-server": "webpack serve"
    }

    "scripts": {
      "dev-server": "webpack serve "
    }

Source: webpack dev-server

edited Dec 29 '21 at 18:18

answered Jul 11 '21 at 19:19

Anand Raja

2,676
1
30
35

Unless you're using typescript for the config files, then it's easier to just use `webpack serve` for all 4.x and above. – Corné Aug 12 '21 at 03:53

ipegasus · Answer 6 · 2020-12-12T18:57:35.720

14

Solution

package.json

"scripts": {
    "startdev": "webpack serve --mode development --env development --hot --port 3000"
    ...
    ...
  },
"devDependencies": {
...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0"
 },

Console

$ npm run startdev

edited Dec 12 '20 at 18:57

answered Dec 12 '20 at 18:52

ipegasus

14,796
9
52
76

score 11 · Answer 7 · answered Jan 10 '17 at 13:36

11

Try changing the webpack version from 1.x to 2.x in your package.json:

Eg:

 "devDependencies": {
    "webpack": "2.2.0-rc.3",
    "webpack-dev-server": "2.1.0-beta.0",
    "webpack-validator": "^2.3.0"
  }

This happens sometimes when you use pre-release version of webpack-dev-server with released version of webpack or viceversa.

answered Jan 10 '17 at 13:36

Sridhar Sg

1,546
13
21

It's Dec 2020, and I'm using ` "webpack": "^4.44.2", "webpack-cli": "^3.3.8", "webpack-dev-server": "^3.11.0"` – John Henckel Dec 07 '20 at 18:22

score 11 · Answer 8 · answered Nov 26 '20 at 13:05

The issue is with newer webpack-cli version. If webpack-cli <= 3.x webpack-dev-server package work fine. For webpack-cli >= 4.x, use npx webpack serve command to run local server.

For webpack-cli 3.x:
"scripts": {
  "start:dev": "webpack-dev-server --mode=development"
}

For webpack-cli 4.x:
"scripts": {
  "start:dev": "webpack serve --mode=development"
}

score 8 · Answer 9 · answered Sep 18 '18 at 23:40

8

I forgot to install webpack-cli. So I ran below command and issue got fixed.

npm i -D webpack-cli

answered Sep 18 '18 at 23:40

Karthik

1,447
1
18
26

score 8 · Answer 10 · answered Jul 01 '19 at 19:59

8

Update your Webpack version (and webpack CLI):

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge

If you don't use one of those mentioned above, feel free to omit.

answered Jul 01 '19 at 19:59

Raz Buchnik

7,753
14
53
96

2

This did it for me, thank you. Instead I ran yarn add (your command here) etc. – CodeConnoisseur Apr 14 '20 at 16:28

score 7 · Answer 11 · answered Feb 10 '17 at 16:19

I also go this error when I had only installed webpack locally and hadn't installed it globally yet.

I had webpack-dev-server installed globally though and it had a dependency on a global install of webpack. To be fair npm did complain while installing webpack-dev-server:

UNMET PEER DEPENDENCY webpack@^2.2.0

score 7 · Answer 12 · answered Feb 21 '21 at 16:59

7

I solved this by creating a script command on package.json.

"dev": "webpack serve --config webpack.config.js --open",

answered Feb 21 '21 at 16:59

Vince

776
11
21

score 6 · Answer 13 · answered Oct 17 '20 at 19:34

6

In my case the solution was just use previous versions -

"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

answered Oct 17 '20 at 19:34

Oleg

1,044
1
14
10

Mahijendra · Answer 14 · 2021-08-03T10:08:01.877

I've had a similar problem. I think it's related to webpack version.

UPDATE JULY 2021

People who have versions of "webpack-cli": "^4 or above", & "webpack": "^5 or above",.

You can give a try updating your webpack version by this command

npm install --save-dev webpack webpack-cli webpack-dev-server

Now go to you package.json, under scrpits add this line

"dev": "webpack serve --mode development --env development"

This totally worked for me.

score 4 · Answer 15 · answered Nov 06 '17 at 06:48

The general situation is due to Webpack and webpack-dev-server version is not compatible. Like I also have this problem, my computer's webpack is 1.15.0, but webpack-dev-server is 2.x above version. So I uninstall webpack-dev-server: npm uninstall webpack-dev-server -g Then install the 1.15.0 version of webpack-dev-server, you can solve this problem by npm install webpack-dev-server@1.15.0 -g

score 4 · Answer 16 · edited Mar 26 '18 at 07:19

4

Try changing webpack version to 3.0 and web-dev-server to 2.7.1

Eg:

"devDependencies": {
    "webpack": "^3.0.0",
    "webpack-cli": "2.0.13",
    "webpack-config-utils": "2.0.0",
    "webpack-dev-server": "^2.7.1",
    "webpack-validator": "2.2.7"
}

edited Mar 26 '18 at 07:19

msp

3,272
7
37
49

answered Mar 26 '18 at 07:18

SHRIDHAR

61
4

score 4 · Answer 17 · answered Apr 29 '19 at 09:44

4

I had the same problem with webpack 4.

It is version compatible issue.

To fix the issue run following command to install webpack-cli in web pack 4 .

 yarn add webpack-cli -D

answered Apr 29 '19 at 09:44

Manuja Jayawardana

313
2
8

score 3 · Answer 18 · answered Oct 18 '20 at 14:52

3

Deprecate the webpack-cli version by using the command :

npm install -D webpack-cli@3

The new version is in the Beta phase and likely to fix this bug.

answered Oct 18 '20 at 14:52

DKT

41
5

score 2 · Answer 19 · answered Aug 08 '17 at 22:52

I fixed this solution by running npm start which was just a wrapper running 'webpack-dev-server' rather than running webpack-dev-server directly into the console. The problem was that I was passing options into a method I should not have been passing options into.

Running webpack-dev-server with npm start showed me the correct error message. Running webpack-dev-server directly only gave me "Error: Cannot find module 'webpack/bin/config-yargs' ". Weird.

I am on: "webpack": "^2.6.1", "webpack-dev-server": "^2.7.1"

Binita Bharati · Answer 20 · 2021-03-26T09:42:38.563

I had got the following dependencies installed (without specifying any particular version)

 "webpack-cli": "^4.5.0",
 "webpack-dev-server": "^3.11.2"

This error appears during the yarn start with the following entry in package.json specific to the scripts.start attr.

 "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }

So, it turns out that webpack-dev-server --open is looking for webpack-cli version 3.3. I got rid of this error by installing the specific version of webpack-cli The working package.json looks like this:

  "webpack-cli": "3.3",
  "webpack-dev-server": "^3.11.2"

But, if you don't want to downgrade the webpack-cli version, update the "start": "webpack-dev-server --open" to "start": "webpack serve --open"

Can't believe this fixed it. `"webpack": "^5.42.0", "webpack-cli": "3.3", "webpack-dev-server": "^3.11.2"` — K20GH, Jul 02 '21 at 09:06

score 1 · Answer 21 · answered Jan 17 '18 at 00:51

This is usually due to version mismatches between libraries (including webpack/yargs, in your case). This can happen a lot when you have left a project sitting for a while and some dependencies in your node_modules directory have become stale. A very simple solution, before fussing with different versions of everything, is to just move your node_modules directory to a temporary location and re-run npm install:

% mv node_modules nod_modules.REMOVED
% npm install

Then, try rerunning webpack.

score 1 · Answer 22 · answered May 14 '19 at 12:32

1

To upgrade all packages (afer installing webpack-cli and webpack-dev-server), you can

npm --depth=9999 upgrade

That should fix the nonmatching version problem.

answered May 14 '19 at 12:32

serv-inc

35,772
9
166
188

score 1 · Answer 23 · answered Nov 28 '20 at 19:07

1

Please use webpack serve for run webpack-dev-server

webpack serve --config config/webpack.dev.js --progress --profile --watch --content-base src/

answered Nov 28 '20 at 19:07

Farshad jahanmanesh

857
9
14

score 1 · Answer 24 · answered Jun 22 '21 at 07:38

1

It's webpack versioning problem You need to update your webpack using this command

npm install --save-dev webpack webpack-cli webpack-dev-server

Now in package.json file use

"dev": "webpack serve --config webpack.config.js --open"

answered Jun 22 '21 at 07:38

MD SHAYON

7,001
45
38

webpack serve works, but my npm command requires a variable for some automatic things to be handled: `npm run start:front -- --page home` the --page home would determine which page to render. but when I do this with serve, it thinks it is an option – Tidris Jul 07 '21 at 01:07

score 0 · Answer 25 · answered Jan 21 '21 at 04:58

I tried the following lines and it was solved:

As the issue is with webpack-dev-server so goto node-modules.
find webpack-dev-server then goto dependencies
check the dependency info of webpack and webpack-cli and their versions.
Reinstall those names with the exact same versions.

Then try re-running the dev-server.

In my case: "dev-server": "webpack-dev-server --open"

console: npm run dev-server

score 0 · Answer 26 · edited Feb 06 '21 at 20:12

0

-> So, first do you exclude the node_modules folder.
->after verificad if in the archive package.json the dependencies : "webpack", "webpack-cli" and "webpack-dev-server" they are in "dependencies":{}.
-> The end, Open the terminal execute the command : yarn. the install all depends again that was excluded.

edited Feb 06 '21 at 20:12

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Feb 06 '21 at 18:49

Danrley

1

Kaisar sarwar · Answer 27 · 2023-02-07T06:37:46.357

0

Changing the command from "serve": "webpack-dev-server" to "serve":"webpack serve" solved this issue. I've tried this solution with webpack dev server v3.11.0 and v3.11.2; both worked fine for me.

edited Feb 07 '23 at 06:37

answered Feb 14 '21 at 05:38

Kaisar sarwar

1
4

score 0 · Answer 28 · answered Feb 15 '21 at 15:07

use webpack serve instead of webpack-dev-server in your package.json under scripts. it perfectly work for me. I had the same error and this fixed it.

my devDependencies:

"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"

original post : https://stackoverflow.com/a/64304022/11739552

score 0 · Answer 29 · answered Feb 20 '21 at 06:24

0

I just solved it.

The problem was on path on index.html.

from:

<script src="./dist/myBundle.js"></script>

to:

<script src="myBundle.js"></script>

answered Feb 20 '21 at 06:24

Vince

776
11
21

score -1 · Answer 30 · answered Jan 07 '20 at 17:34

None of the above answers worked for me. If you are still getting this error, you can try this, this fixed my problem:

Open node_modules\webpack-dev-server\bin\webpack-dev-server.js

Change Line 84: require('webpack-cli/bin/config-yargs')(yargs);

To:

require('webpack-cli/bin/config/config-yargs')(yargs);

Change Line 92: const config = require('webpack-cli/bin/convert-argv')(yargs, argv, {

To:

const config = require('webpack-cli/bin/utils/convert-argv')(yargs, argv, {

score -2 · Answer 31 · answered Dec 17 '20 at 15:31

-2

downgrade webpack-cli

npm install -D webpack-cli@3

answered Dec 17 '20 at 15:31

Arvind kumar

87
2
8

Cannot find module 'webpack/bin/config-yargs'

31 Answers31

Linked