React-hot-loader: Can't find hot-update.json file using proxy

[unsafePtr]

Description and behavior

The project i'm currently working on has a back-end written in python and the front-end written using react+redux. To accelerate developing considered to add the Hot Module Replacment. After successful following the official webpack docs i get worked a test project and decided to add support of HMR in our.
webpack.dev.config.js

var path = require('path');
var webpack = require('webpack');
var rootDir = path.resolve(__dirname, '../');
var autoprefixer = require("autoprefixer");

var config = {
    context: path.resolve(rootDir, "src", "app"),
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        "./main.jsx"
    ],
    output: {
        path: path.resolve(rootDir, "web", "build"),
        publicPath: 'static/build/',
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            plugins: ["react-hot-loader/babel"],
                            presets: [["es2015", {"modules": false}], "react", "stage-2"],
                            cacheDirectory: true
                        }
                    }
                ]
            },
            // ... other loaders
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ],
    devServer: {
        host: "localhost",
        port: 8080,
        hot: true,
        inline: true,
        publicPath: 'static/build/',
        proxy: {
            "**": { // proxy all
                target: "http://localhost:8000", // our back-end api
                secure: false
            }
        }
    }
}

module.exports = config;

main.jsx

if (module.hot) {
    module.hot.accept();
}

Accessing the dev server(localhost:8080) activate proxy. Everything seems to be okey and in console we receive:

[HMR] Waiting for update signal from WDS
[WDS] Hot Module Replacement enabled.

After changing something in redactor, web socket try to receive the update

App updated. Recompiling...
bundle.js:111848 [WDS] App hot update...
bundle.js:112349 [HMR] Checking for updates on the server...

And does not find the file

bundle.js:30 GET http://localhost:8080/static/build/5a841e751eddf305557a.hot-update.json 404 (Not Found)
bundle.js:112304 [HMR] Cannot find update. Need to do a full reload!
(anonymous) @ bundle.js:112304
bundle.js:112305 [HMR] (Probably because of restarting the webpack-dev-server

I thought that may be is somewhere problem in paths, but the most strange thing is that generated chunk by the webpack-dev-server was with different hash.

0.2e32a471020278b4c5ad.hot-update.js [emitted]
2e32a471020278b4c5ad.hot-update.json [emitted]
chunk {0} bundle.js, 0.2e32a471020278b4c5ad.hot-update.js (main)

2e32a471020278b4c5ad.hot-update.json != 5a841e751eddf305557a.hot-update.json

Anyone have ideas why is going to work with this behavior? Or maybe i'm configured wrong the proxy, and somewhere mistaken?

Environment

React Hot Loader version: ^3.0.0-beta.6

1. node -v: 6.7.0
2. npm -v: 4.4.1
3. Operating system: Windows 10
4. Browser and version: chrome 57

[nupurgrover]

I have a similar setup for the webpack-dev-server with a proxy, and the exact same thing is happening - different hashes for chunks, and a 404 error while trying to load the hot-update.json

[nupurgrover]

I was able to fix this in my development environment by correcting my output.publicPath and devServer.publicPath and adding devServer.contentBase. @unsafePtr I am almost certain that you need to take a second look at your configuration.

[YvesHenri]

@nupurgrover Could you please post a sample of your dev config? I'm facing pretty much the very same issue.

[nupurgrover]

@YvesHenri

I set output.publicPath in my baseConfig -

const baseConfig = {
  entry: ['./application/scripts/index.jsx'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
// remaining configuration

The config for the dev-server is
```
const devConfig = {
entry: ['react-hot-loader/patch', 'webpack-dev-server/client?https://localhost:8088', 'webpack/hot/only-dev-server'],
devServer: {
port: 8088,
publicPath: '/',
contentBase: path.resolve(__dirname, 'dist'),
proxy: {
'/api': {
secure: false,
target: 'http://localhost:8080',
},
},
historyApiFallback: {
index: 'views/index.html',
},
hot: true,
},
// remaining configuration
};

[gregberge]

entry: ['react-hot-loader/patch', 'webpack-dev-server/client?https://localhost:8088', 'webpack/hot/only-dev-server']

Try to only stay with 'react-hot-loader/patch' in entry.

I think publicPath is not needed but I am not a Webpack expert, it is a Webpack HMR related issue. You should try to get help from the Webpack team.