What about Webpack 2 & React Hot Loader 3?

[fakiolinho]

Great work @glenjamin. I want to ask if we can use Webpack 2 & React Hot Loader 3 or not? Before with Webpack 1 i was using react-transform-hmr but now this is deprecated and react-hot-loader is the next best thing.

Also, i think docs are not 100% clear regarding Webpack 2 updates etc.

Example also needs to be upgraded (i am willing to help).

Thanks for your hard work.

[glenjamin]

Webpack 2 works fine with no user-facing changes I think.

There were some fixes done a while back when it was in alpha to maintain compat with both.

Personally I still use transform-hmr - works fine for me.

[fakiolinho]

Ok great, thanks!!! I 'll try with both.

What about updating the example?

[marr]

I am also curious about this.

[marr]

I did get it working by adding the following to webpack.config.js:

entry: {
    app: [ 'whatwg-fetch', 'react-hot-loader/patch', './main.js', 'webpack-hot-middleware/client' ],
  },
...
plugins: [
...,
new webpack.HotModuleReplacementPlugin()
]

and .babelrc:

...,
plugins: [
"react-hot-loader/babel",
...
]

and in my server route:

app.use(webpackHotMiddleware(compiler, {
    heartbeat: 10 * 1000,
    log: console.log,
  }));

[marr]

I had to take out the ['es2015', { modules: false }] setting from .babelrc and just use es2015 due to my jest tests not compiling anymore. I'm not sure if that will have any negative impacts on file size or whatever.

[fakiolinho]

@marr if you keep setting ['es2015', { modules: false }] and use babel-plugin-transform-es2015-modules-commonjs for your test env jest works?

In your .babelrc:

"test": {
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

and in your npm scripts section:

"test": "cross-env NODE_ENV=test jest"

[marr]

Thanks for the tip @fakiolinho, that does work. I notice that using ["es2015", { modules: false }] increases the file size of the generated bundle. Is that expected?

[wuyuanyi135]

For me, react hot loader 3 does not work. It simply reproduce the issue in #108

Instead, I used babel transform hmr, and remove the entry point for react hot loader, magic happens.

Can you share me your project with react hot loader working?

[noahgrant]

@glenjamin I haven't used transform-hmr before (I was using hot reloader 1.x), but because of hot reloader 3.0's issues with the middleware, I've switched to transform-hmr per your comment above. And it works! Except...it doesn't seem that transform-hmr does any update (not even a full refresh) for stateless functional components (as described here). So it's not actually a full replacement for react-hot-loader, yet I can't upgrade to webpack 2 without it...

[butsjoh]

@marr Did you get webpack 2 + hot middleware + react hot loader 3 working in the end? This thread is confusing cause you are saying that you got it to work and @wuyuanyi135 is claiming it is not. So if it is working it would help if you could paste your configs.

[butsjoh]

For reference i think this could be a working solution: https://stackoverflow.com/questions/42286331/how-to-get-react-hot-loader-working-with-webpack-2-and-webpackdevmiddleware#42286664

[amannn]

It's working, but the handling of runtime errors doesn't quite work. The overlay is never shown and the app doesn't recover.

I made a fork of react-hot-boilerplate that uses webpack-hot-middleware. I noticed that webpack-dev-server does a full reload when an error happens. I added that to index.js in order to get the handling of runtime errors working:

if (module.hot) module.hot.accept('./App', () => {
  try {
    render(App)
  } catch (e) {
    location.reload();
  }
});

I also tried the reload option of webpack-hot-middleware but that didn't work for me.

[nickgcattaneo]

I've been using webpack 1.x, 2.x, and now 3.5+ along with Gearon's React Hot Loader 3 since I discovered it over a year ago and have had no issues or fallouts. Would be happy to comment on repo's/etc if anyone needs help.

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!