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 [email protected] did the job. — MartianMartian
– MartianMartian, Commented Mar 17, 2018 at 5:21

Serhii Matrunchyk · Accepted Answer · 2021-09-12 09:22:26Z

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

Do you mean changing webpack-dev-server to webpack serve?
this also works when combining webpack 5, webpack-cli 4 and webpack-dev-server 3 (the version treadmill never ends)
Don't use --watch with serve it doesn't make any sense. github.com/webpack/webpack-cli/issues/…

Zach Smith · Accepted Answer · 2021-01-06 06:28:49Z

92

Jan 2021

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

answered Jan 6, 2021 at 6:28

Zach Smith

9,05615 gold badges74 silver badges152 bronze badges

5 Comments

fsevenm Over a year ago

And also don't remove webpack-dev-server, webpack serve needs it.

cbdeveloper Over a year ago

Wait, it does work, but from their official migration tutorial, we get this: serve is removed in favor of DevServer. Is this really the recommended approach? Thanks.

villasv Over a year ago

@cbdeveloper apparently yes, according to webpack-dev-server latest docs as well.

Illorian Over a year ago

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

floer32 Over a year ago

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

Nikola Spalevic · Accepted Answer · 2016-12-16 10:24:21Z

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, 2016 at 10:24

Nikola Spalevic

1,07713 silver badges18 bronze badges

8 Comments

cwharris Over a year ago

Also worth checking webpack --version from cli if you've got it installed globally.

Xapadoan Over a year ago

2020 Update: downgrading to previous versions is not a very good solution, please checkout @serhii-matrunchyk answer below

Aj_ Over a year ago

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 [email protected] -D". My webpack version is 4.44.2 and dev-server version is 3.11.0 if anyone's wondering.

ipegasus Over a year ago

This worked for me: stackoverflow.com/a/65268634/1112656

Pluto Over a year ago

@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): stackoverflow.blog/2021/04/19/…

|

Shivam Modi · Accepted Answer · 2021-03-13 15:43:57Z

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"

Your solution worked. Did you find out why webpack-dev-server is failing?

Anand Raja · Accepted Answer · 2021-12-29 18:18:47Z

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

Unless you're using typescript for the config files, then it's easier to just use webpack serve for all 4.x and above.

ipegasus · Accepted Answer · 2020-12-12 18:57:35Z

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

Sridhar Sg · Accepted Answer · 2017-01-10 13:36:48Z

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.

It's Dec 2020, and I'm using ` "webpack": "^4.44.2", "webpack-cli": "^3.3.8", "webpack-dev-server": "^3.11.0"`

CoderOO7 · Accepted Answer · 2020-11-26 13:05:36Z

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

Karthik · Accepted Answer · 2018-09-18 23:40:49Z

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

npm i -D webpack-cli

Raz Buchnik · Accepted Answer · 2019-07-01 19:59:22Z

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.

This did it for me, thank you. Instead I ran yarn add (your command here) etc.

LukeP · Accepted Answer · 2017-02-10 16:19:00Z

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

Oleg · Accepted Answer · 2020-10-17 19:34:44Z

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"

Vince · Accepted Answer · 2021-02-21 16:59:25Z

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

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

Mahijendra · Accepted Answer · 2021-08-03 10:08:01Z

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.

mspriyakk · Accepted Answer · 2017-11-06 06:48:43Z

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 [email protected] -g

msp · Accepted Answer · 2018-03-26 07:19:54Z

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

Manuja Jayawardana · Accepted Answer · 2019-04-29 09:44:53Z

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

DKT · Accepted Answer · 2020-10-18 14:52:14Z

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.

Austin Kim · Accepted Answer · 2017-08-08 22:52:50Z

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 · Accepted Answer · 2021-03-26 09:42:38Z

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"

Rob Bailey · Accepted Answer · 2018-01-17 00:51:50Z

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.

serv-inc · Accepted Answer · 2019-05-14 12:32:32Z

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.

Farshad jahanmanesh · Accepted Answer · 2020-11-28 19:07:03Z

Please use webpack serve for run webpack-dev-server

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

MD SHAYON · Accepted Answer · 2021-06-22 07:38:51Z

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, 2021 at 7:38

MD SHAYON

8,11156 silver badges43 bronze badges

1 Comment

Tidris Over a year ago

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

Ridwanur Rahman · Accepted Answer · 2021-01-21 04:58:48Z

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

Brian Tompsett - 汤莱恩 · Accepted Answer · 2021-02-06 20:12:56Z

-> 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.

HeshanHH · Accepted Answer · 2021-02-15 15:07:07Z

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

Vince · Accepted Answer · 2021-02-20 06:24:04Z

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>

Kaisar sarwar · Accepted Answer · 2023-02-07 06:37:46Z

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.

stamhaney · Accepted Answer · 2020-01-07 17:34:21Z

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, {

Collectives™ on Stack Overflow

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

31 Answers 31

14 Comments

5 Comments

8 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

31 Answers 31

14 Comments

5 Comments

8 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related