错误：找不到模块“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.

Answer 1

Link globally installed package to your project:

npm link webpack

Checkout the official documentation of yarn link .

Answer 2

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

Answer 3

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

Answer 4

在终端中运行以下命令：

npm install --save-dev webpack

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

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

全局安装 webpack 和 CLI 对我有用。

npm i -g webpack webpack-cli

Answer 9

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

Answer 10

On windows, I have observed that this issue shows up if you do not have administrative rights (ie, 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.

Answer 11

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

Answer 12

打开 npm 命令提示符和 -- cd 解决方案文件夹，然后在 NPM cmd prommt 中运行npm link webpack 并重新构建..

Answer 13

You can try this.

npm install --only=dev

It works for me.

Answer 14

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

Answer 15

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

Answer 16

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.

Answer 17

npm link webpack worked for me.

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

Answer 18

对于 Visual Studio 用户：右键单击 npm 文件夹和“Restore Packages”。

Answer 19

就我而言，帮助我更改了父文件夹名称并从此名称中删除了一些& ，您还可以尝试更改保存代码的名称或文件夹。

Answer 20

虽然建议的解决方案（ npm link webpack ）在本地工作，但在我的 CI（GitHub 操作）上我遇到了同样的问题，为了解决它，我使用了：

 npm i --save-dev webpack

Answer 21

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

Answer 22

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

Answer 23

为我解决的问题是“build.js”中“webpack.config”的路径错误

Answer 24

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

Answer 25

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

Answer 26

After all the suggestions as a solution to the problem, simply deleting the "&" in the parent folder name did the trick. Tnx Adam.