React + Webpack HMR refreshes the page (not hot loading)

Question

I'm having trouble getting the web boot loader to work correctly.

When I load the page, I get the following as I expected:

[HMR] Waiting for update signal from WDS ...
[WDS] hot swappable module enabled.

But when I save the changes, the page automatically hard refreshes the browser (instead of replacing the HMR).

//webpack.config.js { entry: { client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer host and port app: "./HelloWorld.tsx" }, devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map', output: { path: path.join(__dirname, 'dist'), filename: '[name].entry.js' }, module: { loaders: [ { test: /\.ts(x?)$/, loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader'] } ] }, devServer: { contentBase: "./dist", port:8786 }, plugins: [ new webpack.NoErrorsPlugin() ] } 

: webpack-dev-server --hot --inline

in an interesting passage, if I use babel-preset-react-hmre , everything works as expected. (However, I really do not want to use this, since it seems less supported than the corresponding hot reaction reactor).

Answer 1

I ran into this problem. A couple of things:

To debug your problem, try turning on Save Log (in Chrome dev tools). This will be saved in the console logs through page updates, so you can at least see any messages that the webpack-dev server logs before starting the update.

In my case, the webpack-dev server was updated because I did not select HMR in my js input file. Adding the following line to the file resolved the issue:

 // Opt-in to Webpack hot module replacement if (module.hot) module.hot.accept() 

More about module.hot webpack HMR docs API is very useful.