It seems that maybe the latest version of react-hot-loader has some compatibility challenges.
Setting up a simple case using an ejected CRA project with react-hot-loader patched in (as per the docs from that project), and a structure that looks like this:
|- App (hot(module)(App) exported, imports Test1/Test1)
|- Test1
| |- Test1 (async export)
| |- RealTest1 (the actual component)
The Test1 loader code is pretty simple:
export default asyncComponent({
resolve: () => import(/* webpackChunkName: "real-test-1" */ './RealTest1'),
LoadingComponent: () => <div>Loading...</div>,
});This works on initial render, however any changes to RealTest1 after the initial render result in the hot-reloaded async component only showing "Loading..." with no errors. It seems that perhaps the promise isn't resolving any more..?
I've had an initial poke around in the code, but haven't been able to turn up any leads as to why yet (guessing it might be promise related, or to do with the HMR chunk name from webpack?)
It seems that maybe the latest version of
react-hot-loaderhas some compatibility challenges.Setting up a simple case using an ejected CRA project with
react-hot-loaderpatched in (as per the docs from that project), and a structure that looks like this:The
Test1loader code is pretty simple:This works on initial render, however any changes to
RealTest1after the initial render result in the hot-reloaded async component only showing "Loading..." with no errors. It seems that perhaps the promise isn't resolving any more..?I've had an initial poke around in the code, but haven't been able to turn up any leads as to why yet (guessing it might be promise related, or to do with the HMR chunk name from webpack?)