238

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.

16
  • 4
    Did you run npm install webpack before? Commented Apr 8, 2015 at 7:49
  • 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.
    Commented Apr 8, 2015 at 11:21
  • 1
    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... Commented Apr 8, 2015 at 13:13
  • 9
    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
    Commented Apr 9, 2015 at 13:40
  • 3
    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
    Commented Apr 9, 2015 at 14:12

25 Answers 25

403

Link globally installed package to your project:

npm link webpack

Checkout the official documentation of yarn link.

6
  • 16
    This is the simplest answer out there. Commented Mar 12, 2017 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
    Commented Mar 20, 2017 at 11:01
  • there doesnt seem anyway to unlink . webpack-dev-server crashed after this.
    – Plankton
    Commented Jun 7, 2017 at 7: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. Commented May 27, 2018 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
    Commented Aug 18, 2018 at 4:52
102

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!!!!!

5
  • 10
    package-lock.json is the culprit Commented Oct 8, 2019 at 19:49
  • @SérgioS.Filho how so? Commented Dec 21, 2020 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 Commented Mar 18, 2021 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 Commented Nov 17, 2022 at 3:23
  • This helped me because linking to webpack (as otherwise suggested) was not an option on the build server.
    – KrimblKrum
    Commented Nov 29, 2022 at 21:37
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...

2
  • 14
    but you didnt mention how to install it "locally"
    – jpganz18
    Commented Sep 27, 2018 at 2:06
  • 2
    locally is npm install webpack , without using -g as mentioned. This worked in my case.
    – Honza P.
    Commented Jun 12, 2020 at 9:11
35

Run below commands in Terminal:

npm install --save-dev webpack

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

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

3
  • 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_
    Commented Sep 7, 2015 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
    Commented Oct 15, 2016 at 22:14
  • Yes. Works fine on Windows 10.
    – Siva
    Commented Aug 5, 2020 at 15:08
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.

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

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
3
  • 1
    This is just a repeat of an existing answer. rm -R and rm -r are synonymous.
    – Akaisteph7
    Commented Jan 26 at 17:22
  • @Akaisteph7 Yes, maybe but this worked for me, so I thought to put up this answer to help.
    – Aman Jha
    Commented Jan 28 at 4:46
  • 1
    If you think an existing answer is right, what you should do is upvote it, not post it again.
    – Akaisteph7
    Commented Jan 29 at 15:34
4

Installing both webpack and CLI globally worked for me.

npm i -g webpack webpack-cli
2

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.

2
rm -rf node_modules
rm -rf package.json-lock
npm install --force or npm install --legacy-peer-deps
2
  • 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
    Commented Oct 16, 2022 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?
    – skomisa
    Commented Oct 18, 2022 at 18:24
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.

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

1

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

1

You can try this.

npm install --only=dev

It works for me.

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.

1

I resolved this issue simply running this command:

npm install webpack --save-dev
0

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

0
0

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.

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"

0

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

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
0

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

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.