Webpack - webpack-dev-server: command not found

Question

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

Answer 1

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!

Answer 2

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.

Answer 3

Okay, it was easy:

npm install webpack-dev-server -g

What confused me that I did not need that at first, probably things changed with a new version.

Answer 4

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.

Answer 5

I had the same issue but the below steps helped me to get out of it.

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

2. Running using npx for running directly

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.

Answer 6

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.