16

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

undefined
  • 33,537
  • 22
  • 129
  • 198
  • If you're using the devserver from the command line with hot+inline you shouldn't also specify it in your config – Dominic May 17 '16 at 09:09
  • @dominictobias am i missing something? Afaik im not specifying hot or inline in config. – undefined May 17 '16 at 11:38
  • You have `client: 'webpack-dev-server/client?http://localhost:8786',` in there, not sure if that'll help but you're not supposed to add it when using those options with dev server – Dominic May 17 '16 at 12:07
  • Actually with `react-hot` it should be there. I have the same issue (refreshing not hot replacing) but note that non of these hot loaders work with stateless react components. Also you might want to give https://github.com/gaearon/react-transform-hmr a go if it's not working – Dominic May 17 '16 at 15:52
  • @dominictobias I don't think the issue is the component itself as if I use babel-preset-react-hmre it does hot load the change. Ill take a look at react-transform-hmr, it looks from that like theres a new react-hot loader coming soon, i might try that too. – undefined May 17 '16 at 23:45

1 Answers1

36

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.

Elliot
  • 1,463
  • 1
  • 14
  • 14