webpackwebpack-dev-server

Webpack hmr: __webpack_hmr 404 not found


I'm using webpack-dev-server for hot module replacement. It's working just fine, but this error keeps showing up in the console every couple of seconds: GET http://mysite:8080/__webpack_hmr 404 (Not Found).

Here's my webpack.config.js:

var webpack = require('webpack'),
  hostname = 'mysite',
  port = 8080;

module.exports = {
  entry: [
    'babel-polyfill',
    './src/js/main.js',
    './dev/requireCss.js',
    'webpack/hot/dev-server',
    // I'm assuming the fault lies in the following line, but I can't figure out what's wrong
    'webpack-hot-middleware/client?path=http://' +
      hostname +
      ':' +
      port +
      '/__webpack_hmr',
  ],
  output: {
    path: __dirname + '/webpack',
    filename: 'bundle.js',
    publicPath: 'http://' + hostname + ':' + port + '/',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader?presets[]=react&presets[]=es2015'],
      }, // removed some loaders for brevity
    ],
  },
  resolve: {
    extensions: ['', '.json', '.js', '.jsx'],
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devtool: 'source-map',
  devServer: {
    contentBase: __dirname + '/dev',
    hot: true,
    proxy: [
      {
        path: /\/(?!__webpack_hmr).+/, // I get the same error if I change this to 'path: /\/.+/'
        target: 'http://my-backend.localhost',
      },
    ],
  },
};

The idea is that the dev-server should forward all requests except from / and __webpack_hmr to my backend (my-backend.localhost). This works fine for everything except __webpack_hmr.

Is there something I can change in my conf to make the error disappear?


Solution

  • Fixed by deleting the following line under entry: 'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'. I don't know why it worked. See Amin Ariana's answer for an explanation to why this may work for you.