search

ctrlplusb / react-universally

A starter kit for universal react applications.
MIT License
1.69k stars 243 forks source link

Hot module replacement do not work on asyncComponents #577

Open mathportillo opened 6 years ago

mathportillo commented 6 years ago

Hello all, and thanks for the amazing project!

To reproduce: clone universally, checkout branch next, run npm run develop, alter anything in a component "inside" an asyncComponent (eg.: add content to HomeRoute.js)

On branch next, when running npm run develop with the project untouched, updates made to components loaded asyncronally fails to reflect on browser. Instead of not updating, everything inside the async component is removed from tree after the update. The route still matches and the asyncComponent component still loads in react tree, but with no children.

No error appear on server console and client console. On client console HMR logs as if working normally:

[HMR] connected
client.js?0e07:222 [HMR] bundle rebuilding
client.js?0e07:230 [HMR] bundle rebuilt in 172ms
process-update.js:41 [HMR] Checking for updates on the server...
process-update.js:114 [HMR] Updated modules:
process-update.js:116 [HMR]  - ./shared/components/DemoApp/AsyncHomeRoute/HomeRoute.js
process-update.js:116 [HMR]  - ./shared/components/DemoApp/AsyncHomeRoute/index.js
process-update.js:116 [HMR]  - ./shared/components/DemoApp/index.js
process-update.js:121 [HMR] App is up to date.
client.js?0e07:230 [HMR] bundle rebuilt in 491ms

I don't know if the problem is on Universally config, or on react-async-component code, or error on any of it's dependencies.

Things I tried:

Thanks again.

mathportillo commented 6 years ago

It looks like adding key={Math.random()} to ReactHotLoader component on client folder solves the issue, (as seen here: ctrlplusb/react-async-component/issues/14)

Still, I would say that a proper fix should be either not needing a random key for react-async-component to work, or adding it permanently to React Universally base.

So I will let you guys close the issue based on your decision.

Thanks anyway for this amazing project!!