67

Got this Error after running webpack. Webpack is installed globally and I'm running Node

PS D:\Projects\ng2-admin-master> ng serve
Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Projects\ng2-admin-master\node_modules\html-webpack-plugin\lib\compiler.js:11:26)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Projects\ng2-admin-master\node_modules\html-webpack-plugin\index.js:7:21)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
PS D:\Projects\ng2-admin-master>
Chanaka Amarasinghe
  • 3,489
  • 11
  • 26
  • 38
  • 1
    What is the most frustrating thing is such type of crap happened absolutely for no reason. I didn't install anything new or changed the configuration. Today, it just stopped working. – mimic Feb 14 '21 at 17:51

13 Answers13

86

Update (Apr 2018)

Webpack 4 onwards you are required to install webpack-cli. You may also want to install webpack-dev-middleware if you need to use the options marked with a key on this page.

In this case the command to install is:

npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware

As mentioned above, webpack-dev-middleware should be optionally added based on your requirements.

Older answer

Node requires you to install webpack to your project.

You have 2 options to solve the above:

  1. Remove global webpack and install it locally

    npm uninstall -g webpack
    npm install --save-dev html-webpack-plugin webpack webpack-dev-server
    
  2. You can link the global webpack pkg to your project's node modules. The downside of this is that your project will be forced to use most updated webpack. This will create a problem only when some updates are not backwards compatible.

    npm i webpack -g; npm link webpack --save-dev
    

You can omit the html-webpack-plugin depending on your requirement.

You can find more info on this github issue page.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Raunaqss
  • 1,265
  • 12
  • 17
  • Neither of those options worked for me. Just updated to npm 5+. I can build production locally but not while pushing to heroku. Keeps raising error but the module is definitely located in the correct place. – Jonathan Corrin Jul 20 '17 at 06:21
  • @JonathanCorrin hmm that's unusual. NPM's cache gets confused sometimes, try clearing it using `npm cache clean` and then try installing webpack locally. – Raunaqss Jul 20 '17 at 06:25
  • Another thing I would try is to delete the `node_modules` directory and then do `npm install` again. This error occurs only when `webpack` doesn't exist locally, so if your `package.json` has `webpack` mentioned in its `devDependencies`—this should do the job. – Raunaqss Jul 20 '17 at 06:26
  • For some reason none of those worked for me. I was able to get it to build but I'm unsure of what actually did the job. I removed node_modules && dist, cleaned the cache and downgraded webpack to 2.2.0. Its now building. I had tried removing node_modules and installing webpack locally to dev dependencies but it did not work yesterday. – Jonathan Corrin Jul 20 '17 at 18:03
  • I still go this issue. Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' Please check my note from below – sparkmix Nov 23 '18 at 20:41
  • @sparkmix. Where can I find the note from below? – Raunaqss Nov 26 '18 at 07:56
  • 2
    This is very useful information and answer is perfect. Thank you. – prem30488 Dec 21 '19 at 06:40
  • For me I deleted `node_modules`, `build` and `package-lock.json` file and if using `npm` reran `npm install` and `npm run build` – GameSalutes Jan 05 '20 at 19:17
35

I faced a similar issue when updating my Angular app using ncu. Finally solved it by:

  • remove the node_modules directory
  • remove package-lock.json
  • reinstall the packages.

You can run this in PowerShell (make sure you are in the correct working directory):

rm node_modules -r -force
rm package-lock.json
npm cache verify
npm install
Martin Brandl
  • 56,134
  • 13
  • 133
  • 172
10

Context:

I had this problem with a React application.

I tried to uninstall webpack globally and locally, also deleted the local folder node_modules, reinstalled all local npm modules (with npm install), etc.

Nothing worked, until doing this...


Solution:

  1. Remove package-lock.json & node_modules.
  2. Don't remove the other files (like: package.json, index.js...)
  3. Install all package (npm extracts information for the installation from package.json) with npm install === npm i.
  4. Now, run your code and voila!
Guillem Puche
  • 1,199
  • 13
  • 16
9

I tried for hours almost every thing suggested on different threads on Stack overflow but nothing worked. Eventually (with a lot of luck) I tried this and it worked:

deleted node_modules library (not sure if required)
npm install -g @angular/cli
npm install @angular/cli
npm install
Shay
  • 407
  • 2
  • 8
  • 15
7

This happened to me after I configed 'react-bootstrap' in my next js app. try adding this fixed my problem:

yarn add webpack@webpack-4

or if using npm:

npm i webpack@webpack-4
Audrey
  • 401
  • 2
  • 7
  • 15
6

Below worked for me:-

  • Removed node_modules
  • Deleted package-lock.json
  • Run npm install
NVCoder
  • 201
  • 3
  • 5
0

Check webpack.config.js and make sure all dependencies are installed.

I was having the same problem too. It was resolved by installing html-webpack-plugin dependency. It was defined in my webpack.config.js but not installed.

imdzeeshan
  • 1,098
  • 20
  • 26
0

Remove the package-lock.json and try npm install it will resolve the issue.

user3198259
  • 178
  • 3
  • 13
0

This is work for me:

1. npm uninstall -g webpack
2. rm node_modules -r -force
3. rm package-lock.json
4. npm install
MHS
  • 881
  • 1
  • 13
  • 30
0

You have to check webpack modules already install in the node_modules folder or on your machine? if not install it

0xcuonghx
  • 450
  • 5
  • 4
0

For me I fixed this error with:

yarn add --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware
Arulkumar
  • 12,966
  • 14
  • 47
  • 68
EJA
  • 21
  • 3
0

It happened when I installed using yarn while the project used npm. I removed the node_modules folder then tried again with npm i

rm -rf node_module
npm install

The reason for this is that the project used specific packages versions which are compatible together but using yarn installed the newest versions which may not fully compatible with the current project.

Check which lock file the project uses then use the corresponding package manager.

unloco
  • 6,928
  • 2
  • 47
  • 58
0

This will fix your problem:

npm remove webpack -g
npm i webpack --save-dev
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
  • "Remove global webpack and install it locally" --Top answer. Is this answer really unique? – General Grievance Mar 16 '22 at 01:28
  • Please see [How to answer](https://stackoverflow.com/help/how-to-answer) for details on how to provide quality answers. It's useful to provide context and details on why this might be an ideal solution. – arkon Mar 19 '22 at 15:17