'Error: Cannot find module 'webpack' when running npm start on angular 2 webpack starter

I have cloned from here:

https://github.com/AngularClass/angular2-webpack-starter

Installed, with some warnings:

npm install typings webpack-dev-server rimraf webpack -g

At first it was complaining about RxJs - wanted version 2, but in package.json was version 4. I updated package.json so that RxJs version would be 2.

Warnings where those:

npm WARN cannot run in wd [email protected] npm run typings -- install (wd=/vagrant_data)
npm WARN engineStrict Per-package engineStrict (found in this package's package.json)
npm WARN engineStrict won't be used in npm 3+. Use the config setting `engine-strict` instead.
npm WARN unmet dependency /vagrant_data/node_modules/typedoc requires typescript@'1.6.2' but will load
npm WARN unmet dependency /vagrant_data/node_modules/typescript,
npm WARN unmet dependency which is version 1.8.9
npm WARN unmet dependency /vagrant_data/node_modules/html-webpack-plugin/node_modules/pretty-error/node_modules/renderkid requires utila@'~0.3' but will load
npm WARN unmet dependency /vagrant_data/node_modules/html-webpack-plugin/node_modules/pretty-error/node_modules/utila,
npm WARN unmet dependency which is version 0.4.0
npm WARN unmet dependency /vagrant_data/node_modules/typings/node_modules/update-notifier/node_modules/configstore/node_modules/mkdirp requires minimist@'0.0.8' but will load
npm WARN unmet dependency /vagrant_data/node_modules/typings/node_modules/minimist,
npm WARN unmet dependency which is version 1.2.0

Now running

npm start

> [email protected] start /vagrant_data
> npm run server:dev


> [email protected] server:dev /vagrant_data
> webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/

root directory: /vagrant_data
module.js:327
    throw err;
    ^

Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/vagrant_data/config/webpack.common.js:5:15)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

npm ERR! Linux 3.2.0-4-amd64
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "server:dev"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] server:dev: `webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server:dev script 'webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/'.
npm ERR! This is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.
npm ERR! Linux 3.2.0-4-amd64
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "server:dev"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! path npm-debug.log.1202353761
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall open

npm ERR! Error: EACCES: permission denied, open 'npm-debug.log.1202353761'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, open 'npm-debug.log.1202353761']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'open',
npm ERR!   path: 'npm-debug.log.1202353761' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR!     /vagrant_data/npm-debug.log

npm ERR! Linux 3.2.0-4-amd64
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `npm run server:dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'npm run server:dev'.
npm ERR! This is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run server:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.
npm ERR! Linux 3.2.0-4-amd64
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! path npm-debug.log.514887008
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall open

npm ERR! Error: EACCES: permission denied, open 'npm-debug.log.514887008'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, open 'npm-debug.log.514887008']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'open',
npm ERR!   path: 'npm-debug.log.514887008' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR!     /vagrant_data/npm-debug.log

From last line - npm-debug.log file I do not even see.

Why I am getting error that webpack is not found if when installing there was no such error?

I am now installing on vagrant image, but I tried to install on my mac computer and errors looks familiar.



Solution 1:[1]

Please follow these steps:

  1. Remove package.json.lock file from folder where your angular project is
  2. Install angular cli lib by running npm install -g @angular/cli
  3. Remove node_modules folder and install npm packages by running npm install
  4. Rebuild node-sass binary by running npm rebuild node-sass
  5. Run project with command ng serve -o

Solution 2:[2]

When running an npm script like "npm start" and that script has a dependency on modules that define executable scripts, npm will look for the path to that executable on the node_modules.bin folder.

By installing the module using only:

npm install webpack

without the -g will do that, add the path to the node_modules.bin folder

installing a module using -g will make possible to you to run the command:

webpack

by yourself.

You can see more on how npm scripts work on this link.

Solution 3:[3]

I had a similar issue and i did go with local installation in my project folder here in windows. can you try install it in local application folder, using npm install webpack

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Styx
Solution 2 thitemple
Solution 3 Thalaivar