Asynchronous React Router v3 routes fail to hot-reload

Hey there! I’m having some difficulty getting react-hot-loader@3.0.0-beta.1 to hot-reload changes to views that are passed to React Router as lazy-loaded POJOs. Updating a view class triggers the usual console messages and throws the warning about changing <Router history>, but the rendered output doesn’t refresh. Curiously, though, changing the components that the views require immediately hot-reloads them, even within the selfsame non-reloading async views.

Here’s a quick screencast demonstrating the issue:

…and here’s the code base that screencast’s taken from: https://github.com/phyllisstein/hildy/tree/react-hot-3. (The master branch of which repo is still using react-transform-hmr without any evident issues.)

I’d be grateful for any suggestions you can provide, and happy to offer more troubleshooting info if I can! Thanks for looking into this.

[sthzg]

I ran into the problem with hot reloading async routes and updated by additionally registering amodule.hot.accept in the require.ensure() callbacks. E.g. like this

getChildRoutes(partialNextState, callback) {
  require.ensure([], function (require) {

    if (module.hot) {
      module.hot.accept('../routes/Blog', () => 
        callback(null, [require('../routes/Blog').default]);
    }

    callback(null, [
      require('../routes/Blog').default,
    ]);
  });
},

[kettanaito]

Is there any update regarding this issue?

So far there has been only a few suggestions, each having its own drawbacks and all being but workarounds:

Provide “key” prop to <Route />

Fixed the problem, but as mentioned causes deep re-render, therefore loosing components’ state. However, you can find this workaround in officially listed examples of react-hot-loader (i.e. here).

Using asyncComponent from react-async-component

As suggested here, it is possible to wrap the modules you wish to load async with asyncComponent and pass them as component prop to Route directly. This will eliminate hot-reloading issue, however forces you to create additional files doing nothing but resolving modules async.

Various other workarounds

Which are not meant for good code maintenance.

So, it this somehow being solved, or already has been solved with the new release of react-hot-loader?