Error: Cannot find module 'webpack'

Question

I'm just getting started with webpack and am having difficulty getting the multiple-entry-points sample to build. The webpack.config.js file in the example includes the line

 var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");

which fails for me with the error

Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin'

Searching around, I found other examples of using the CommonsChunkPlugin with the expression

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");

which fails with the error

ReferenceError: webpack is not defined

Some more searching found a number of examples including

var webpack = require('webpack');

and my build now fails with

Error: Cannot find module 'webpack'

I'm at a loss as to how to proceed.

Yes. Webpack is installed and working on other examples. It was in trying to add the plugin for the multiple-entry-points example that I ran into trouble. — Ed., Apr 08 '15 at 11:21
`Error: Cannot find module 'webpack'` is a node error. So this has nothing to do with webpack itself (afaict). It seems like node is looking in the wrong folders... — Johannes Ewald, Apr 08 '15 at 13:13
@AndreiDMS: I did. And I've updated node to the latest version. Updated npm to the latest version. Uninstalled and reinstalled webpack. Tried this on 2 different machines. Shrank my webpack.config.js file down to 1 line var webpack = require('webpack'); Still have the same error. — Ed., Apr 09 '15 at 13:34
I see, `npm install -g webpack` didn't work for me either. But it does with `npm install webpack` - make sure you are in the app root folder when you call `npm install webpack` then check if the module exists in `node_modules` folder. It also seems that `webpack` needs `fsevents` (optional) module on linux systems - I'm using Windows so I'm not sure - try installing `fsevents` also — AndreiDMS, Apr 09 '15 at 13:40
Per the more recent webpack docs, I have also tried var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); which fails with 'cannot find module' — Ed., Apr 09 '15 at 13:42
Check if `CommonsChunkPlugin.js` exists in `app_document_root/node_modules/webpack/lib/optimize/` — AndreiDMS, Apr 09 '15 at 13:51
Yes /node_modules/webpack/lib/optimize/CommonsChunkPlugin.js exists — Ed., Apr 09 '15 at 13:59
As I said above, global installation didn't work for me either, so try installing `webpack` in the local app folder, using `npm install webpack`, without `-g` — AndreiDMS, Apr 09 '15 at 14:12
uninstalled global webpack and installed locally. To run, I have to execute 'node node_modules\webpack\bin\webpack.js', which is OK, but I get nothing but the help message from webpack, no matter what I do — Ed., Apr 09 '15 at 14:21
Why would you execute the module from command line? Wasn't the purpose of installing it to use it inside a node app? I don't know how webpack works, I was just trying to help you with module installation :) — AndreiDMS, Apr 09 '15 at 16:01
webpack is a tool, similar to browserify. It is a node application which reads a config file and executes commands from there. It's in webpack's config that the require call isn't working correctly. — Ed., Apr 09 '15 at 16:18
on mac localhost and if only install webapck global it shows the same error, but if install both global and locate project , it works.. — user1775888, Aug 07 '15 at 20:57

score 398 · Answer 1 · edited May 06 '21 at 15:31

398

Link globally installed package to your project:

npm link webpack

Checkout the official documentation of yarn link.

edited May 06 '21 at 15:31

johannchopin

13,720
10
55
101

answered Jan 24 '17 at 01:55

Ruslanas Balčiūnas

7,310
3
24
41

15

This is the simplest answer out there. – Thomas Wagenaar Mar 12 '17 at 11:11
1

On which file does this setting affects ? I didn't see any changes to the json files. Can you please elaborate ? – Royi Namir Mar 20 '17 at 11:01
there doesnt seem anyway to unlink . webpack-dev-server crashed after this. – Plankton Jun 07 '17 at 07:13
After a month not being able to make it work I was very close to give up and keep working with Angularjs. This finally worked! Thank you. – NestorArturo May 27 '18 at 15:57
1

i'm installing webpack, but i run webpack without any parameter show , this type of message : which one do you like to install (webpack-cli/ web-command) – Ng Sharma Aug 18 '18 at 04:52
After so much of struggle, this worked thank you so muh @ruslanas-balčiūnas – Yash Pokar Aug 31 '21 at 07:41

score 87 · Answer 2 · edited Feb 06 '23 at 19:20

87

I solved the same problem by reinstalling, execute these commands

rm -rf node_modules
rm -f package-lock.json
npm install

rm is always a dangerous command, especially with -f, please notice that before executing it!!!!!

edited Feb 06 '23 at 19:20

Philippe Fanaro

6,148
6
38
76

answered Mar 20 '19 at 02:59

troy

2,145
2
23
31

7

package-lock.json is the culprit – Sérgio S. Filho Oct 08 '19 at 19:49
@SérgioS.Filho how so? – DJ_Stuffy_K Dec 21 '20 at 19:04
I had to change the Node version as well because of any issue, but removing the package-lock.json was essential to resolve the issue. Removing node_modules and starting clean again – Flavio Lima Mar 18 '21 at 12:00
this is the way if you npm install with the wrong node version, even if you switch to another node version it won't work until you remove package-lock.json and npm install again – Linh Nguyen Nov 17 '22 at 03:23
This helped me because linking to webpack (as otherwise suggested) was not an option on the build server. – KrimblKrum Nov 29 '22 at 21:37

score 62 · Answer 3 · answered Aug 12 '15 at 15:48

62

While working on windows, I've installed webpack locally and it fixed my problem

So, on your command prompt, go to the directory of which you want to run webpack, install webpack locally (without the -g) and enjoy...

answered Aug 12 '15 at 15:48

Ran

747
6
8

14

but you didnt mention how to install it "locally" – jpganz18 Sep 27 '18 at 02:06
2

locally is npm install webpack , without using -g as mentioned. This worked in my case. – Honza P. Jun 12 '20 at 09:11

score 34 · Answer 4 · edited Feb 11 '19 at 10:11

34

Run below commands in Terminal:

npm install --save-dev webpack

npm install --save-dev webpack-dev-server

edited Feb 11 '19 at 10:11

Community

1
1

answered May 23 '18 at 23:29

Sreen Sunki

351
3
2

score 24 · Answer 5 · edited May 23 '17 at 12:26

24

Seems to be a common Windows problem. This fixed it for me:

Nodejs cannot find installed module on Windows?

"Add an environment variable called NODE_PATH and set it to %USERPROFILE%\Application Data\npm\node_modules (Windows XP), %AppData%\npm\node_modules (Windows 7), or wherever npm ends up installing the modules on your Windows flavor. To be done with it once and for all, add this as a System variable in the Advanced tab of the System Properties dialog (run control.exe sysdm.cpl,System,3)."

Note that you can't actually use another environment variable within the value of NODE_PATH. That is, don't just copy and paste that string above, but set it to an actual resolved path like C:\Users\MYNAME\AppData\Roaming\npm\node_modules

edited May 23 '17 at 12:26

Community

1
1

answered Jun 16 '15 at 13:25

Jamie Treworgy

23,934
8
76
119

1

not work for me on Windows 10. There is no `node_modules` folder in `C:\Users\MYNAME\AppData\Roaming\npm\`. I tried to set `NODE_PATH` value `C:\Program Files (x86)\nodejs\node_modules` but it didn't help – VB_ Sep 07 '15 at 19:52
3

Works just fine for me on Windows 10: `setx NODE_PATH %AppData%\npm\node_modules`. You might need to restart your `cmd` before the `NODE_PATH` variable is availble or also run `set NODE_PATH=%AppData%\npm\node_modules`. – Nux Oct 15 '16 at 22:14
Yes. Works fine on Windows 10. – Siva Aug 05 '20 at 15:08

score 9 · Answer 6 · answered Apr 28 '16 at 04:50

9

I was having this issue on OS X and it seemed to be caused by a version mismatch between my globally installed webpack and my locally installed webpack-dev-server. Updating both to the latest version got rid of the issue.

answered Apr 28 '16 at 04:50

Cody Sand

266
5
8

that worked for me as well, so I figure it's well worth considering under various scenarios if you have this problem. – JL Peyret Mar 09 '20 at 20:05

score 6 · Answer 7 · answered Dec 30 '21 at 12:34

6

I was facing same problem, and I solved through this command, check this out will solve your issue.

rm -Rf node_modules
rm -f package-lock.json
npm install

answered Dec 30 '21 at 12:34

Aman Jha

308
4
4

score 4 · Answer 8 · answered May 22 '20 at 20:46

4

Installing both webpack and CLI globally worked for me.

npm i -g webpack webpack-cli

answered May 22 '20 at 20:46

David Gogua

43
1
12

score 2 · Answer 9 · edited Aug 28 '20 at 22:56

If you have installed a node package and are still getting message that the package is undefined, you might have an issue with the PATH linking to the binary. Just to clarify a binary and executable essentially do the same thing, which is to execute a package or application. ei webpack... executes the node package webpack.

In both Windows and Linux there is a global binary folder. In Windows I believe it's something like C://Windows/System32 and in Linux it's usr/bin. When you open the terminal/command prompt, the profile of it links the PATH variable to the global bin folder so you are able to execute packages/applications from it.

My best guess is that installing webpack globally may not have successfully put the executable file in the global binary folder. Without the executable there, you will get an error message. It could be another issue, but it is safe to say the that if you are here reading this, running webpack globally is not working for you.

My resolution to this problem is to do away with running webpack globally and link the PATH to the node_module binary folder, which is /node_modules/.bin.

WINDOWS: add node_modules/.bin to your PATH. Here is a tutorial on how to change the PATH variable in windows.

LINUX: Go to your project root and execute this...

export PATH=$PWD/node_modules/.bin:$PATH

In Linux you will have to execute this command every time you open your terminal. This link here shows you how to make a change to your PATH variable permanent.

score 2 · Answer 10 · edited Oct 16 '22 at 20:35

2

rm -rf node_modules
rm -rf package.json-lock
npm install --force or npm install --legacy-peer-deps

edited Oct 16 '22 at 20:35

Tyler2P

2,324
26
22
31

answered Oct 16 '22 at 19:22

Ahmed El-Beltagy

71
4

1

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. – Tyler2P Oct 16 '22 at 20:35
Answers containing nothing but code are liable to be downvoted or deleted (even if the code provides a valid fix). Include some text in your answer to clarify/explain why it will work. For example, why have you provided two alternatives for `npm install`? How does the reader know which alternative is appropriate? While this may be obvious to you, it may not be obvious to others. Also: [1] Did you mean to write **package-json.lock** rather than **package.json-lock**? [2] How is your answer different/better than that already [posted by Aman Jha](https://stackoverflow.com/a/70531767/2985643)? – skomisa Oct 18 '22 at 18:24

score 1 · Answer 11 · answered Jul 06 '17 at 15:12

1

On windows, I have observed that this issue shows up if you do not have administrative rights (i.e., you are not a local administrator) on the machine.

As someone else suggested, the solution seems to be to install locally by not using the -g hint.

answered Jul 06 '17 at 15:12

dev.bv

980
9
16

score 1 · Answer 12 · answered Nov 29 '18 at 21:41

1

for me, it is a wrong error feedback.

there was config error in webpack.config.js,

delete the file and start over solved my issue

answered Nov 29 '18 at 21:41

Seeliang

2,321
1
13
18

score 1 · Answer 13 · answered Dec 19 '18 at 15:38

1

Open npm command prompt and -- cd solution folder and then just run npm link webpack in NPM cmd prommt and re build..

answered Dec 19 '18 at 15:38

SAIRAM

11
1

score 1 · Answer 14 · answered Feb 27 '19 at 08:45

1

You can try this.

npm install --only=dev

It works for me.

answered Feb 27 '19 at 08:45

aermin

341
3
8

score 1 · Answer 15 · answered Jun 10 '21 at 11:57

1

In my case helped me changing the parent folder name and remove some & from this name, you can also try changing the name or folder where you keep your code.

answered Jun 10 '21 at 11:57

Panda

79
2

score 0 · Answer 16 · answered Feb 02 '18 at 06:08

Nothing suggested above worked for me (including the NODE_PATH variable). I created a sym link of "node_modules" from my local folder to the global AppData(eg below) and it worked like charm.

C:\Users\mmoinuddin\AppData\Roaming\npm>mklink /D node_modules c:\essportreact\day1\node_modules
symbolic link created for node_modules <<===>> c:\essportreact\day1\node_modules
C:\essportreact\day1>webpack
Hash: 2a82a67f90f9aa05ab4a
Version: webpack 1.15.0

score 0 · Answer 17 · answered Jul 19 '18 at 15:13

0

Just found out that using Atom IDE terminal did not install dependencies locally (probably a bug or just me). Installing git bash externally and running npm commands again worked for me

answered Jul 19 '18 at 15:13

Oladayo agbolade

11
3

score 0 · Answer 18 · answered Dec 04 '18 at 19:32

I had a ton of issues getting a very simple .NET Core 2.0 application to build in VS 2017. This is the error from AppVeyor, however it was essentially the same thing locally (some paths omitted for security) :

Performing first-run Webpack build...

module.js:327 throw err;

EXEC : error : Cannot find module '......../node_modules/webpack/bin/webpack.js'

at Function.Module._resolveFilename (module.js:325:15)

at Function.Module._load (module.js:276:25)

at Function.Module.runMain (module.js:441:10)

at startup (node.js:140:18)

at node.js:1043:3

csproj(25,5): error MSB3073: The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 1.

Build FAILED.

I stumbled upon this question and answer, and I noticed my local instance also had the same warning sign over the {Project Root} -> Dependencies -> npm folder. Right clicking and hitting "Restore packages" got everything loaded up properly, and I was able to build successfully.

score 0 · Answer 19 · answered Dec 10 '19 at 14:40

0

npm link webpack worked for me.

My webpack configuration: "webpack": "^4.41.2", "webpack-dev-server": "^3.9.0", "webpack-cli": "^3.3.10"

answered Dec 10 '19 at 14:40

jayesh

761
6
4

score 0 · Answer 20 · answered Aug 05 '20 at 02:02

0

For Visual Studio users: Right click on the npm folder and "Restore Packages".

answered Aug 05 '20 at 02:02

acousticplanet

161
1
9

score 0 · Answer 21 · answered Dec 25 '21 at 00:27

0

While the suggested solution (npm link webpack) worked locally, on my CI (GitHub actions) I had the same problem, and to resolve it I used:

 npm i --save-dev webpack

answered Dec 25 '21 at 00:27

Francesco Borzi

56,083
47
179
252

Hefaz · Answer 22 · 2022-01-20T18:46:16.200

Laravel Users

If none of the above options work for you, then you probably need to install Laravel-mix correctly. Here is how:

npm install laravel-mix --save-dev

Now create a webpack.mix.js file using this command:

touch webpack.mix.js

Add this code into your webpack.mix.js file:

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

You probably will also need to create a tailwind.config.js file using the command touch tailwind.config.js and then add this code ainto it:


module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

Finally run npm run dev

score 0 · Answer 23 · answered Apr 21 '22 at 18:38

0

So there are quite few possible issues, in my case on windows:

I moved my project to a folder with an & in the name, which is fine for windows but it break npm. My solution was to remove the & from the name.

test&mocking -> test_and_mocking

answered Apr 21 '22 at 18:38

Patrick Aleman

612
6
19

score 0 · Answer 24 · edited Jul 23 '22 at 09:52

0

What solved it for me was that the path to webpack.config was wrong in build.js

edited Jul 23 '22 at 09:52

Tyler2P

2,324
26
22
31

answered Jul 21 '22 at 23:33

Paulo Guilherme

11
1

score 0 · Answer 25 · answered Jul 21 '23 at 06:20

0

I resolved this issue simply running this command:

npm install webpack --save-dev

answered Jul 21 '23 at 06:20

Sabin Bogati

721
8
11

Error: Cannot find module 'webpack'

25 Answers25

Linked