Wepback 2 hot reload not rerender

Question

I am working on a Universal React project, my client entry point:

import React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import {AppContainer} from 'react-hot-loader'
import {Router, browserHistory} from 'react-router'
import {syncHistoryWithStore} from 'react-router-redux'
import {addLocaleData} from 'react-intl'
import it from 'react-intl/locale-data/it'
import en from 'react-intl/locale-data/en'
import IntlProvider from 'shared/containers/IntlProvider'
import configureStore from 'shared/configureStore'
import routes from 'shared/routes'
import {isDev, isLive} from 'shared/config'

[en, it].forEach(addLocaleData)

const hook = document.getElementById('app')
const initialState = JSON.parse(hook.getAttribute('data-initial-state'))
const store = configureStore(initialState)
const history = syncHistoryWithStore(browserHistory, store)
let content = (
  <Provider store={store}>
    <IntlProvider key="intl">
      <Router history={history}>
        {routes}
      </Router>
    </IntlProvider>
  </Provider>
)

if (isLive) {
  content = <AppContainer>{content}</AppContainer>
}

function renderApp() {
  render(content, hook)
}

if (isLive) {
  module.hot.accept('./index.js')
  module.hot.accept('../shared/routes', renderApp)
}

renderApp()

Run codeHide result

When changing components, the reboot seems to work, but the render is not applied. perhaps this happens before a hot reboot occurs?

NOTE. My route configuration is now a classic non-diminutive route.

Answer 1

I had the same problem because I just forgot to add code for modules replacing

if (module.hot) {
module.hot.accept(
    "./App",
    () => {
        const NextApp = require("./App").App; // THIS LINE
        render(NextApp);
    },
);

}