react-async-component: Async component won't hot-reload
I moved my app from code-split-component to react-async-component but the Async components don’t seem to hot reload properly. When I make a change to an Async component I get the usual messages in Chrome console with no differences ([HMR]… ) however the displayed content doesn’t change. If I change an Async component then also change a non-async component, the changes to both appear at the same time.
Relevant section of App.jsx:
import { withAsyncComponents } from 'react-async-component'
import store from './store'
import Root from './Root'
function renderApp(Param) {
const app = (
<AppContainer>
<Provider store={store}>
<Param />
</Provider>
</AppContainer>
)
withAsyncComponents(app).then(({ appWithAsyncComponents }) =>
ReactDOM.render(appWithAsyncComponents, rootElement), // eslint-disable-line
)
}
renderApp(Root)
if (module.hot) {
module.hot.accept(
'./Root',
() => renderApp(require('./Root').default), //eslint-disable-line
)
}
AppContent.jsx:
import IntroductionAsync from './IntroductionAsync'
<Match pattern="/" exactly component={IntroductionAsync} />
IntroductionAsync.jsx:
import { createAsyncComponent } from 'react-async-component'
const AsyncIntroduction = createAsyncComponent({
resolve: () => System.import('./Introduction'),
})
export default AsyncIntroduction
The problem occurs when I try to edit Introduction.jsx.
react-async-component@0.2.2 react-hot-loader@3.0.0-beta.6 react-router@4.0.0-alpha.6
Is there something I’m doing wrong or is this a bug of some sort?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 18 (5 by maintainers)
All, I am almost done with
1.0.0-alpha.2, which includes significant improvements towards supporting hot reloading, including React Hot Loader. So far it is working swimmingly, but I need to put it through some of my larger projects to know for sure.This should land within a few days.