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

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).

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

"Preserve log" option in Chrome devtools

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x