I am working on a React webapp using webpack, loosely alongside this tutorial.
Accidentally, I added the node_modules folder to my git. I then removed it again using git rm -f node_modules/*
.
Now, when I try starting the webpack server, I get the following error:
> webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors
sh: webpack-dev-server: command not found
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve"
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] devserve: `webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors`
npm ERR! spawn ENOENT
At first I thought it was only my project, but then I checked out the code checkpoints of the tutorial: same error! So something seems to be messed up globally.
Here's what I tried so far:
rm node_modules
and reinstall with npm install
npm cache clean
as someone mentioned regarding this issue on githubnpm install -g webpack
The error message still persists. What else can I try?
PS: The content of webpack.dev.config.js
is:
var config = require('./webpack.config.js');
var webpack = require('webpack');
config.plugins.push(
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("development")
}
})
);
module.exports = config;
I install with npm install --save-dev webpack-dev-server
then I set package.json and webpack.config.js like this:
setting.
Then I run webpack-dev-server and get this error error.
If I don't use npm install -g webpack-dev-server
to install, then how to fix it?
I fixed the error configuration has an unknown property 'colors'
by removing colors:true
. It worked!
The script webpack-dev-server
is already installed inside ./node_modules directory.
You can either install it again globally by
sudo npm install -g webpack-dev-server
or run it like this
./node_modules/webpack-dev-server/bin/webpack-dev-server.js -d --config webpack.dev.config.js --content-base public/ --progress --colors
.
means look it in current directory.
npm install webpack-dev-server -g -- windows OS
Better you use sudo in linux to avoid permission errors
sudo npm install webpack-dev-server -g
You could use sudo npm install webpack-dev-server --save to add it to package.json.
Sometimes you may require to run the below commands.
npm install webpack-cli --save or npm install webpack-cli -g
For global installation : npm install webpack-dev-server -g
For local installation npm install --save-dev webpack
When you refer webpack in package.json file, it tries to look it in location node_modules\.bin\
After local installation, file wbpack will get created in location: \node_modules\.bin\webpack
I noticed the same problem after installing VSCode and adding a remote Git repository. Somehow the /node_modules/.bin
folder was deleted and running npm install --save webpack-dev-server
in the command line re-installed the missing folder and fixed my problem.
FYI, to access any script via command-line like you were trying, you need to have the script registered as a shell-script (or any kind of script like .js, .rb) in the system like these files in the the dir
/usr/bin
in UNIX. And, system must know where to find them. i.e. the location must be loaded in$PATH
array.
In your case, the script webpack-dev-server
is already installed somewhere inside ./node_modules
directory, but system does not know how to access it. So, to access the command webpack-dev-server
, you need to install the script in global scope as well.
$ npm install webpack-dev-server -g
Here, -g
refers to global scope.
However, this is not recommended way because you might face version conflicting issues; so, instead you can set a command in npm
's package.json
file like:
"scripts": {
"start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors"
}
This setting will let you access the script you want with simple command
$ npm start
So short to memorize and play. And, npm
knows the location of the module webpack-dev-server
.
I had similar problem with Yarn, none of above worked for me, so I simply removed ./node_modules
and run yarn install
and problem gone.
I had the same issue but the below steps helped me to get out of it.
Installing the 'webpack-dev-server' locally (In the project directory as it was not picking from the global installation)
npm install --save webpack-dev-server
Can verify whether 'webpack-dev-server' folder exists inside node_modules.
npx webpack-dev-server --mode development --config ./webpack.dev.js
npm run start
also works fine where your entry in package.json scripts should be like the above like without npx.
I found the accepted answer does not work in all scenarios. To ensure it 100% works one must ALSO clear the npm cache. Either directly Goto the cache and clear locks, caches, anonymous-cli-metrics.json; or one can try npm cache clean
.
Since the author had cleared the cache before trying the recommended solution its possible that failed to make it part of the pre-requisites.
Yarn
I had the problem when running: yarn start
It was fixed with running first: yarn install
Source: Stackoverflow.com