webpack is not recognized as a internal or external command,operable program or batch file

Question

I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder

1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.

webpack is not recognized as a internal or external command,operable program or batch file

I had this problem, but after restarting IDE (PHPStorm in my case) problem was solved — Arthur Tsidkilov, Apr 14 '20 at 09:23

score 223 · Answer 1 · edited Oct 21 '16 at 09:49

223

Better solution to this problem is to install Webpack globally.

This always works and it worked for me. Try below command.

npm install -g webpack

edited Oct 21 '16 at 09:49

DrDom

4,033
1
21
23

answered Oct 21 '16 at 09:13

srikanth_k

2,807
3
16
18

50

I think it should be noted that using the -g installs webpack globally, which you may not want if you have multiple projects that may require different versions of webpack. – Uber Schnoz Mar 13 '17 at 17:59
13

I also ran `npm install -g webpack-cli`. Now it works. – Derk Jan Speelman Nov 11 '21 at 11:53
The [docs](https://www.npmjs.com/package/webpack-dev-server/v/4.9.3) recommend local installation over global. "`webpack-dev-server` will always use a local installation over a global one." – Vicktor Feb 04 '23 at 07:11

Joshua Grosso Reinstate CMs · Answer 2 · 2019-01-02T12:12:21.683

103

As an alternative, if you have Webpack installed locally, you can explicitly specify where Command Prompt should look to find it, like so:

node_modules\.bin\webpack

(This does assume that you're inside the directory with your package.json and that you've already run npm install webpack.)

edited Jan 02 '19 at 12:12

answered Jul 27 '16 at 20:09

Joshua Grosso Reinstate CMs

2,086
2
15
32

4

Agree with Max, the reason being that it is recommended to have webpack installed locally (in devDependencies) - My problem was a little different though, when adding webpack as a pre build step in VS 2017, I thought VS was smart enough to find the webpack cmd locally without the full path – JimiSweden Dec 15 '17 at 09:23
@JimiSweden did you try adding `node_modules\.bin` to _tools->configure external tools_ – Max Favilli Jan 15 '18 at 19:21
7

You could try using `npx webpack` which also checks `./node_modules/.bin` instead of fiddling with paths. – Manfred Jan 18 '19 at 20:06
This is the only answer that has worked for me as of yet. – Matthew Wolman Sep 21 '20 at 21:52

score 91 · Accepted Answer · edited Apr 28 '21 at 15:03

91

I had this issue for a long time too. (webpack installed globally etc. but still not recognized) It turned out that I haven't specified enviroment variable for npm (where is file webpack.cmd sitting) So I add to my Path variable

%USERPROFILE%\AppData\Roaming\npm\

If you are using Powershell, you can type the following command to effectively add to your path :

[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")

IMPORTANT : Don't forget to close and re-open your powershell window in order to apply this.

edited Apr 28 '21 at 15:03

Sabito stands with Ukraine

4,271
8
34
56

answered Mar 05 '16 at 18:24

Vlado

1,052
10
8

6

well Iam stuck at the same place...Can u please elaborate ur answer – Intruder Mar 25 '16 at 17:12
2

I was following all the steps but it did not work then finally I realized, I did not open CMD as administrator. – Hosein Djadidi May 05 '17 at 21:28
1

Better set to %APPDATA%\npm – Mykola Petiukh Mar 01 '19 at 12:13

score 58 · Answer 4 · edited Aug 07 '16 at 10:12

58

npm install -g webpack-dev-server will solve your issue

edited Aug 07 '16 at 10:12

Nikolay Kostov

16,433
23
85
123

answered Aug 07 '16 at 09:49

Araali Farooq

662
6
4

2

It may solve the error message OP posted, but this is not a good solution to the problem as it adds more dependencies than _just_ solving the missing webpack. See any of the other high-voted answers for better alternatives. – angularsen Jan 04 '19 at 11:59
2

As pointed out by different contributors already (see other answers/comments), installing globally is considered bad practice as it locks you down to one version. See also https://webpack.js.org/guides/installation/ – Manfred Jan 18 '19 at 20:07
I faced this problem and your solution work very nicely to solve my problem `'webpack-dev-server' is not recognized as an internal or external command, operable program or batch file. ` – Neloy Sarothi Feb 24 '21 at 07:16

score 34 · Answer 5 · answered May 26 '18 at 12:00

34

Try deleting node_modules in local directory and re-run npm install.

answered May 26 '18 at 12:00

Dushyant Singh

395
3
6

This worked for me because I previously deleted `.bin` folder to fix an issue with `npm install` which introduced this issue instead. – Nacho H Sep 27 '22 at 22:20

score 26 · Answer 6 · answered Nov 09 '19 at 14:08

26

Maybe a clean install will fix the problem. This "command" removes all previous modules and re-installs them, perhaps while the webpack module is incompletely downloaded and installed.

npm clean-install

answered Nov 09 '19 at 14:08

Muhamad Zolfaghari

678
8
16

1

This is most likely the answer you are looking for. – Laerte Sousa Neto Mar 04 '23 at 21:18

score 16 · Answer 7 · answered May 27 '17 at 20:41

16

Add webpack command as an npm script in your package.json.

{
    "name": "react-app",
    "version": "1.0.0",
    "scripts": {
      "compile": "webpack --config webpack.config.js"
    }
}

Then run

npm run compile

When the webpack is installed it creates a binary in ./node_modules/.bin folder. npm scripts also looks for executable created in this folder

answered May 27 '17 at 20:41

Nikhil Ranjan

994
12
16

does not work - npm install -g webpack-dev-server is correct command – TarmoPikaro Aug 17 '18 at 05:58

Ibn Masood · Answer 8 · 2019-05-10T09:55:25.623

13

Webpack CLI is now in a separate package and must be installed globally in order to use the 'webpack' command:

npm install -g webpack-cli

EDIT: Much has changed. Webpack folks do not recommend installing the CLI globally (or separately for that matter). This issue should be fixed now but the proper install command is:

npm install --save-dev webpack

This answer was originally intended as a "work-around" for the OPs problem.

edited May 10 '19 at 09:55

answered Apr 23 '18 at 14:02

Ibn Masood

1,093
1
14
31

1

"must be installed globally" is not correct as I understand it. Even the webpack folks advise against it. See https://webpack.js.org/guides/installation/ – Manfred Jan 18 '19 at 20:09

Manfred · Answer 9 · 2019-01-18T20:12:54.737

We also experienced this problem and I like all the answers that suggest using a script defined in package.json.

For our solutions we often use the following sequence:

npm install --save-dev webpack-cli (if you're using webpack v4 or later, otherwise use npm install --save-dev webpack, see webpack installation, retrieved 19 Jan 2019)
npx webpack

Step 1 is a one-off. Step 2 also checks ./node_modules/.bin. You can add the second step as a npm script to package.json as well, for example:

{
   ...
   "scripts": {
      ...
      "build": "npx webpack --mode development",
      ...
   },
   ...
}

and then use npm run build to execute this script.

Tested this solution with npm version 6.5.0, webpack version 4.28.4 and webpack-cli version 3.2.1 on Windows 10, executing all commands inside of a PowerShell window. My nodejs version is/was 10.14.2. I also tested this on Ubuntu Linux version 18.04.

I'd advise against installing webpack globally, in particular if you are working with a lot of different projects each of which may require a different version of webpack. Installing webpack globally locks you down to a particular version across all projects on the same machine.

score 6 · Answer 10 · answered Jul 09 '19 at 09:57

6

npx webpack

It is worked for me. I'm using Windows 10 and I installed webpack locally.

answered Jul 09 '19 at 09:57

aystiro

73
1
6

score 5 · Answer 11 · answered Jun 28 '19 at 11:24

5

For me it worked to install webpack separately. So simply:

$npm install
$npm install webpack

I'm not sure why this should be necessary, but it worked.

answered Jun 28 '19 at 11:24

Katinka Hesselink

3,961
4
20
26

score 4 · Answer 12 · answered Mar 16 '20 at 06:17

4

This below-given commands worked for me.

npm cache clean --force
npm install -g webpack

Note - Run these commands as administrator. Once installed then close your command prompt and restart it to see the applied changes.

answered Mar 16 '20 at 06:17

Nand

611
6
12

score 3 · Answer 13 · answered Oct 31 '16 at 19:16

3

Just run your command line (cmd) as an administrator.

answered Oct 31 '16 at 19:16

ZOALIT

55
2

score 3 · Answer 14 · answered Jun 05 '17 at 13:42

3

I've had same issue and just added the code block into my package.json file;

 "scripts": {
   "build": "webpack -d --progress --colors"
 }

and then run command on terminal;

npm run build

answered Jun 05 '17 at 13:42

B.Brave

35
1
3

score 3 · Answer 15 · answered Sep 23 '18 at 09:21

3

you have to install webpack and webpack-cli in the same scope.

npm i -g webpack webpack-cli

or,

npm i webpack webpack-cli

if you install it locally you need to call it specifially

node_modules/.bin/webpack -v

answered Sep 23 '18 at 09:21

Irteza Asad

1,145
12
4

Or, if installed locally, you could use `npx webpack` (tested with npm version 6.5.0, webpack 4.28.4 and webpack-cli 3.2.1) – Manfred Jan 18 '19 at 20:10
that's the ticket – May 17 '19 at 22:22
npm i -g webpack webpack-cli – VnDevil Dec 09 '19 at 15:46

score 3 · Answer 16 · answered Apr 17 '19 at 11:54

3

Install WebPack globally

npm install --global webpack

answered Apr 17 '19 at 11:54

Alper Ebicoglu

8,884
1
49
55

score 3 · Answer 17 · answered Dec 12 '19 at 04:47

I had this issue when upgrading to React 16.12.0.

I had two errors one regarding webpack and the other regarding the store when rendering the DOM.

Webpack Error:

webpack is not recognized as a internal or external command,operable program or batch file

Webpack Solution:

Close related VS Solution
Delete node_modules folder
Deleted package-lock.json
npm install
npm rebuild
Repeated this 2-3 times

Store Error:

Type Store<()> is not assignable to type Store<any, AnyAction>

Store Solution:

Suggestions to update my React version didn't fix this error for me, but irrespective I would recommend doing it.

My code ended up looking like this:

ReactDOM.render(
        <Provider store={store as any}>
            <ConnectedApp />
        </Provider>,
        document.getElementById('app')
    );

As per this solution

score 3 · Answer 18 · edited May 05 '20 at 05:33

If you create a boilerplate folder for your JS projects so that you can use JS Modules, webpack and Babel are great tools.

Don't install webpack globally and after installing the most recent versions of both, your package.json file will be loaded up and ready to copy for future projects.

Make sure to delete the node_modules folder to decrease file size in your boilerplate folder and then to reinstall node_modules use npm install.

I forgot to run npm install and kept getting this error when trying to run my webpack dev-server until I realized I needed to run npm install to install node_modules and then it worked.

Delete node_modules + npm install got me going again. Thanks! — Brandon Barkley, Jul 22 '20 at 19:24

score 2 · Answer 19 · answered Apr 29 '19 at 08:45

2

If you have just cloned a repo, you first need to run

npm install

The error your getting will be generated if you are missing project dependencies. The above command will download and install them.

answered Apr 29 '19 at 08:45

PrestonDocks

4,851
9
47
82

score 2 · Answer 20 · answered May 06 '22 at 10:25

2

I also Face the same issue this command works for me

npm install --save-dev webpack

answered May 06 '22 at 10:25

Umer Aziz

111
5

score 1 · Answer 21 · answered Jul 19 '18 at 04:56

1

I got the same error, none of the solutions worked for me, I reinstalled node and that repaired my environment, everything works again.

answered Jul 19 '18 at 04:56

Simon Xiao

11
1

This is what I had to do as well. I tried at least three other "solutions" provided on here and none worked except for uninstalling and reinstalling Node again. – Quiver Apr 12 '19 at 14:44

Akash Yellappa · Answer 22 · 2019-05-09T13:43:15.780

0

Try this folks, the cli needs to be updated to the latest version

npm install --save-dev @angular/cli@latest

credit goes go to R.Richards https://stackoverflow.com/a/44526528/1908827

edited May 09 '19 at 13:43

answered May 08 '19 at 20:46

Akash Yellappa

2,126
28
21

score 0 · Answer 23 · answered Jun 20 '19 at 10:41

0

The fix for me was locally installing webpack as devDependency. Although I have it as devDependencies it was not installed in node_modules folder. So I ran npm install --only=dev

answered Jun 20 '19 at 10:41

Seagull

1,063
1
11
18

score -1 · Answer 24 · answered Dec 14 '17 at 07:03

-1

Sometimes npm install -g webpack does not save properly. Better to use npm install webpack --save . It worked for me.

answered Dec 14 '17 at 07:03

Amartya Banerjee

129
5

1

-g installs globally (not your local project node_modules + package.json) while --save installs locally (in your local node_modules + package.json) so this answer is wrong. – George Feb 09 '18 at 15:58

score -1 · Answer 25 · answered Feb 02 '19 at 14:31

I had this same problem and I couldn't figure it out. I went through every line of code and couldn't find my error. Then I realized that I installed webpack in the wrong folder. My error was not paying attention to the folder I was installing webpack to.

webpack is not recognized as a internal or external command,operable program or batch file

25 Answers25

Linked

Related