Skip to content
This repository has been archived by the owner on Jun 3, 2019. It is now read-only.

Hot module replacement do not work on asyncComponents #577

Open
mathportillo opened this issue Apr 20, 2018 · 1 comment
Open

Hot module replacement do not work on asyncComponents #577

mathportillo opened this issue Apr 20, 2018 · 1 comment

Comments

@mathportillo
Copy link

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
Copy link
Author

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!!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant