Reputation: 2558
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)
Upvotes: 241
Views: 248897
Reputation: 1
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.
Upvotes: 0
Reputation: 3126
This is because of the changes in webpack-cli
version.
webpack-dev-server
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
Upvotes: 19
Reputation: 9363
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" }
Upvotes: 585
Reputation: 355
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.
Upvotes: 5
Reputation: 8063
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"
Upvotes: 1
Reputation: 5918
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"
Upvotes: 2
Reputation: 379
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"
Upvotes: 31
Reputation: 869
I solved this by creating a script command on package.json.
"dev": "webpack serve --config webpack.config.js --open",
Upvotes: 7
Reputation: 869
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>
Upvotes: 0
Reputation: 703
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
Upvotes: 0
Reputation: 1
-> 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.
Upvotes: 0
Reputation: 1
I tried the following lines and it was solved:
Then try re-running the dev-server.
In my case: "dev-server": "webpack-dev-server --open"
console: npm run dev-server
Upvotes: 0
Reputation: 8971
Jan 2021
Using webpack 5, just replace the webpack-dev-server
command with webpack serve
Upvotes: 92
Reputation: 15262
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
Upvotes: 14
Reputation: 895
Please use webpack serve for run webpack-dev-server
webpack serve --config config/webpack.dev.js --progress --profile --watch --content-base src/
Upvotes: 1
Reputation: 121
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"
}
Upvotes: 11
Reputation: 41
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.
Upvotes: 3
Reputation: 1140
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"
Upvotes: 7
Reputation: 1312
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, {
Upvotes: -1
Reputation: 8411
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.
Upvotes: 8
Reputation: 38297
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.
Upvotes: 1
Reputation: 313
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
Upvotes: 4
Reputation: 1587
I forgot to install webpack-cli. So I ran below command and issue got fixed.
npm i -D webpack-cli
Upvotes: 8
Reputation: 71
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"
}
Upvotes: 4
Reputation: 1787
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.
Upvotes: 1
Reputation: 59
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
Upvotes: 4
Reputation: 47
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"
Upvotes: 2
Reputation: 1605
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
Upvotes: 7
Reputation: 1616
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.
Upvotes: 11