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.

Answer 3

I will add here my answer because in my case that was the cause of this issue.

Assuming you are using Next.JS.

After receiving this issue, all I had to do is to close the debug window of the nodeJS (chrome debugging tool, but for the BE, not the UI) and then just to start the project again using npm start

I hope it will help anyone that face it (the other answers here didn't suit me)