When used with react-hot-loader, async component gets stuck on the loader

[mikehdt]

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?)

[mb8z]

I'm having the same exact problem. Did anyone solve this?

[Defmoves]

Having the same problem too, anyone come across any solutions?

[houfeng0923]

maybe this explain and solution is helpful