React + Webpack HMR is refreshing the page (not hot loading)

Question

I'm having a bit of trouble getting the react-hot webpack loader to work correctly.

When I load the page I get the following as I would expect:

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

But when I save a change the page automatically hard refreshes the browser (rather than a HMR replacement).

//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()
    ]
}

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

on an interesting sidenote if I use babel-preset-react-hmre everything works as expected. (However I don't really want to use this as it seems less supported than the proper react-hot loader).

Answer 1

I just ran into this problem. A couple things:

To help debug your particular issue, try enabling "Preserve log" (in Chrome dev tools). This will persist console logs across page refreshes, so you'll at least be able to see any messages that webpack-dev-server is logging before it triggers a refresh.

In my case webpack-dev-server was refreshing because I had not opted into HMR in my entry js file. Adding the following line to the file solved the issue:

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

For details on the module.hot API the webpack HMR docs are very helpful.