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 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 github
install webpack globally with npm install -g webpack
completely delete node and npm from my system (using this guide) and reinstall using brew

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;

Please provide the contents of the file webpack.dev.config.js. — stdob--
– stdob--, Commented Jul 24, 2015 at 13:37
I'm getting the same error and webpack-dev-server is definitely right there in the folder — Damon
– Damon, Commented Nov 5, 2015 at 16:58

Zhongyuan Zhou · Accepted Answer · 2016-07-20 07:34:16Z

217

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.

edited Jul 20, 2016 at 7:34

Zhongyuan Zhou

3393 silver badges15 bronze badges

answered Jul 25, 2015 at 14:10

Jonas Kemper

3,9353 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Martin Over a year ago

For some reason it didn't work for me without the -g flag. So: npm i webpack-dev-server -g solved the problem.

Alex Grande Over a year ago

I too required the -g flag

TJ Trapp Over a year ago

I also needed to npm install webpack -g because it was not installed globally at first

kingd9 Over a year ago

It was confusiong because on the webpack page they don't have the -g option in their example. If you dont want to install globally, you can create a script in the package.json and run it through npm run.

Bhavin Over a year ago

i try uninstall this package using this command "npm uninstall webpack-dev-server -g --save" but not uninstalled, please let me know how to uninstall this package.

Shiva · Accepted Answer · 2021-06-18 02:27:35Z

44

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

or

$ yarn start

So short to memorize and play. And, npm knows the location of the module webpack-dev-server.

edited Jun 18, 2021 at 2:27

answered Jan 9, 2017 at 19:40

Shiva

12.7k2 gold badges74 silver badges91 bronze badges

2 Comments

Chor Over a year ago

But when I run node_modules/.bin/webpack-dev-server,why it said that this is invalid command?I think running node_modules/.bin/webpack-dev-server is equal to running npm run dev

JGFMK Over a year ago

In the readme for webpack-dev-server - they recommend local vs global install!

Fangxing · Accepted Answer · 2017-09-29 04:24:12Z

17

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.

edited Sep 29, 2017 at 4:24

answered Mar 31, 2017 at 4:51

Fangxing

6,2252 gold badges55 silver badges58 bronze badges

Comments

pme · Accepted Answer · 2018-03-21 15:06:57Z

12

Yarn

I had the problem when running: yarn start

It was fixed with running first: yarn install

answered Mar 21, 2018 at 15:06

pme

14.9k5 gold badges63 silver badges111 bronze badges

2 Comments

Hinrich Over a year ago

Simple yarn install worked in my case. Not sure what the reason was.

Akin Hwan Over a year ago

or npm i whichever you prefer

RajaSekhar K · Accepted Answer · 2018-09-24 12:58:50Z

6

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.

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.

answered Sep 24, 2018 at 12:58

RajaSekhar K

1272 silver badges5 bronze badges

Comments

ArjunDhar · Accepted Answer · 2017-12-11 00:47:54Z

2

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.

answered Dec 11, 2017 at 0:47

ArjunDhar

396 bronze badges

Comments

S_K · Accepted Answer · 2019-10-15 12:59:58Z

2

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

answered Oct 15, 2019 at 12:59

S_K

8491 gold badge8 silver badges10 bronze badges

Comments

Goz E. · Accepted Answer · 2020-06-07 17:00:42Z

1

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.

answered Jun 7, 2020 at 17:00

Goz E.

1211 gold badge1 silver badge6 bronze badges

Comments

iled · Accepted Answer · 2017-02-19 20:11:01Z

0

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!

edited Feb 19, 2017 at 20:11

iled

2,1703 gold badges33 silver badges46 bronze badges

answered Feb 19, 2017 at 15:05

user7587906

11 bronze badge

Comments

ulou · Accepted Answer · 2018-07-02 11:19:52Z

0

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.

answered Jul 2, 2018 at 11:19

ulou

5,9326 gold badges40 silver badges51 bronze badges

Comments

Bannershah · Accepted Answer · 2022-11-23 10:56:53Z

0

Use this:-

npm install --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server --legacy-peer-deps

answered Nov 23, 2022 at 10:56

Bannershah

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Sreenivasula Reddy · Accepted Answer · 2019-08-27 12:54:05Z

-1

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

answered Aug 27, 2019 at 12:54

Sreenivasula Reddy

1491 gold badge1 silver badge8 bronze badges

2 Comments

richardsonwtr Over a year ago

Please don't advice using sudo with npm.

richardsonwtr Over a year ago

See why here

Collectives™ on Stack Overflow

Webpack - webpack-dev-server: command not found

12 Answers 12

5 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related