Cannot resolve module 'webpack/hot/emitter' while using hot reloader

I am trying to implement react-hot-loader in my existing application. I followed the tutorial, and used the boilerplate file from this link as suggested in the tutorial. Then, when I start the node server using yarn start, I get the following error:

ERROR in (webpack)-dev-server/client?http://0.0.0.0:3000
Module not found: Error: Cannot resolve module 'webpack/hot/emitter' in /Users/Rai/Documents/github/sarvahitey-core/client/node_modules/webpack-dev-server/client
 @ (webpack)-dev-server/client?http://0.0.0.0:3000 153:19-49
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.78 kB [rendered]
        [0] ./~/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./app/client/components/navbar/navbar.css 274 bytes {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
webpack: Failed to compile.

Here is my webpack config file:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var combineLoaders = require('webpack-combine-loaders');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './app/StartUp.js'
  ],
  output: {
    path: __dirname + "/../app/assets/webpack",
    filename: "[name].js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css'],
  },
  module: {
    loaders: [
      { test: /\.jsx?$/,
        loaders: ['react-hot','babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
            'style-loader',
            combineLoaders([{
              loader: 'css-loader',
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            }])
        )
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("main.css"),
    new webpack.HotModuleReplacementPlugin()
  ]
};

And my package.json file has the following config:

{
  "dependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-runtime": "^6.22.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-on-rails": "^6.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-combine-loaders": "^2.0.3",
    "webpack-dev-server": "^2.3.0"
  },
  "devDependencies": {
    "react-hot-loader": "^1.3.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1"
  },
  "scripts": {
    "start": "node server.js"
  }
}

Any ideas why I am getting the above error? I tried to google the same but couldn't find anything for Cannot resolve module 'webpack/hot/emitter'.

Recommended topics

Hot tags