React-hot-loader: hot reloading does not work with react router v3

[jlobos]

I'm trying to integrate react-hot-loader@next in simple universal react, react-redux and react-router but i can not hot reloading in components:

all code in: https://github.com/jlobos/simple-react-redux-universal

error:

app.js:38402 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
logUpdates @ app.js:38402
applyCallback @ app.js:38370
(anonymous) @ app.js:38378
app.js:38410 [HMR]  - ./src/containers/App.js

index in client (client.js):

render(
  <AppContainer>
    <Root store={store} history={history} />
  </AppContainer>,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    const NewRoot = require('./containers/Root').default
    render(
      <AppContainer>
        <NewRoot store={store} history={history} />
      </AppContainer>,
      document.getElementById('root')
    )
  })
}

Root.js component:

export default function Root (props) {
  return (
    <Provider store={props.store}>
      <Router history={props.history} routes={routes} />
    </Provider>
  )
}

routes.js

export default (
  <Route path='/' component={App}>
    <IndexRoute component={Home} />
  </Route>
)

reduces hot found perfect updating store:

export function configureStore (initialState = {}) {
  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
  )

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers').default
      store.replaceReducer(nextRootReducer)
    })
  }

  return store
}

[AlwaysAwake]

Same here. I've tried many different ways but still don't know how to solve this warning.

[Razinsky]

Same thing here. I have used the exact same setup that your example https://github.com/calesce/react-hot-loader-examples and still I get that error.
Warning: [react-router] You cannot change <Router routes>; it will be ignored

[scisci]

I got the same thing.

I realized module.hot.accept is never called unless I directly edit the file that is listed as a dependency. However, if I edit a dependency of that dependency it doesn't get called.

[scisci]

Nevermind, I figured out what my issue was, but not sure if its related to these other ones. For me, I had to make sure there was no import path that made it from the modified component to the index.js file. If the import path ever makes it to the root, then it will not perform a hot replace because it thinks the whole page needs reloading.

[amoreira]

@scisci I have the same problem here. Do you know how I can resolve without removing import path at the same level as index.js? @calesce could you take a look at this issue?

[scisci]

@amoreira, if you can't remove the import path at index.js, then you have to split up your files in a different way, so the component you want to hot reload, is not imported in index.js.

[Rokt33r]

@Razinsky

There is a hacky solution. https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-211504531

And, keep watching this issue also. https://github.com/gaearon/react-hot-loader/issues/249

[gregberge]

My advice, if you are on react-router v3:

• Upgrade to react-router v4
• Give a try to React Hot Loader v4

We will not provide any support for React Router v3 because the new stable version is v4.