Webpack hmr: __webpack_hmr 404 not found

Question

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?

Answer 1

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.

Answer 2

This line in entry array does not play well with webpack-dev-server:

webpack-hot-middleware/client

because it's a requirement of webpack-hot-middleware for working with any server other than webpack-dev-server (such as express or some such).

I ran into this mixed-server issue by following Webpack tutorials. They should update it so that the entry point for the config file of Webpack using webpack-dev-server doesn't require an artifact produced by webpack-hot-middleware, which tries to hot-emit the developer's module updates into a custom-built server depending on it.

You can remove that line from the entry array, which in case of using dev-server should solve the problem.

FYI That line in your code came from here: https://github.com/webpack-contrib/webpack-hot-middleware where it says:

Add webpack-hot-middleware/client?... into the [webpack config's] entry array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly.

Based on your question, "I'm using webpack-dev-server", you're therefore not using "webpack-hot-middleware" and should remove the entry line.