'webpack-dev-server Cannot find module 'webpack'

I'm trying to use webpack-dev-server to run a simple program but I'm getting this error:

module.js:471
    throw err;
    ^

Error: Cannot find module 'webpack'
    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> 
    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)

I have installed webpack with following npm command

npm install --save-dev webpack

and I have the following configuration:

(webpack.config.js)
var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'client/public');
var APP_DIR = path.resolve(__dirname, 'client/app');

var config = {
  entery: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle,js',
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

module.exports = config;

I have tried everything and I'm really lost. Does anyone have any idea?

node.jsreactjswebpackwebpack-dev-server


Solution 1:[1]

npm install --save-dev webpack is not enough.

You also have to install the following:

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

And optionally, you can also install:

npm install --save-dev webpack-dev-middleware webpack-hot-middleware

Solution 2:[2]

I had the same problem, but I resolved by installing additional webpack-cli

npm install --save-dev webpack-cli

Solution 3:[3]

Try the following:

Firstly, you need to install webpack-dev-server

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

Then in your package.json, use this in your start script:

"start": "webpack serve --config webpack.config.js --open"

Note webpack.config.js should be replaced with the file name of your webpack config file.

Now run npm start

Hope it works!

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 Romein77
Solution 2 Hùng Ng Vi
Solution 3 Alalade Samuel

Related Questions