Loadable-components: HMR not working

[antonybudianto]

Hi,

I'm doing SSR with HMR, when trying to change lazy loaded component, the HMR works on client side, but when I tried to refresh the page, the console is showing these errors:

loadable-components.es.js:93 Uncaught Error: loadable-components: module "./NotFoundPage-1" is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.
    at loadable-components.es.js:93
    at Array.map (<anonymous>)
    at loadState (loadable-components.es.js:87)
    at loadComponents (loadable-components.es.js:118)
    at Object.<anonymous> (client.js:25)
    at Object../src/renderer/client.js (app.js:1413)
    at __webpack_require__ (bootstrap:772)
    at fn (bootstrap:141)
    at Object.0 (app.js:1982)
    at __webpack_require__ (bootstrap:772)

How to Reproduce:

1. Clone https://github.com/antonybudianto/react-ssr-starter
2. npm i
3. npm start
4. Visit random 404 route (e.g http://localhost:3000/asdasd)
5. Change src/routes/NotFoundPage/NotFoundPage.js
   
   
   
   • This route is lazy loaded
   
   
6. Notice the hot reload should work
7. Refresh the page
8. Error shown

Any pointers will be helpful, thank you!

[olehreznichenko]

Have the same issue :(

[antonybudianto]

My current workaround is:

// on server
loadableState.getScriptTag().replace(/-\d+(?=")/g, '')

The idea is to remove the ending dash with index ("./NotFoundPage-1" -> "./NotFoundPage"), and error is gone :smile:

[gregberge]

Oh.. I know what is the problem, this is actually a real bug! Can you try to fix it?

[antonybudianto]

Honestly I don't know where to start. Is it related to this file?
https://github.com/smooth-code/loadable-components/blob/master/src/componentTracker.js

[gregberge]

Yeah it could be pretty complicated, just let go for now. I will create an issue to describe the exact problem.

[antonybudianto]

Hi,

I can confirm the latest release (2.2.1) fixed the issue, thanks @neoziro !

[ion-willo]

Sorry to add on an old issue but we're getting this again on 2.2.2. The problem is that happens randomly so it's very hard to reproduce. Once it happens, it keeps happening until the the server is restarted.

[antonybudianto]

Just updated to 2.2.2 and it's happening again. Can you help? @neoziro

[ahungrynoob]

Have the same issue :(
When I import the same component in different routes, and try to reload from the server, it will appear.

loadable-components.es.js:105 Uncaught (in promise) Error: loadable-components: module "../../components/admin/publish-1" is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.
    at eval (loadable-components.es.js:105)
    at Array.map (<anonymous>)
    at loadState (loadable-components.es.js:96)
    at loadComponents (loadable-components.es.js:130)
    at eval (index.jsx:427)
    at Object../client/pages/admin/index.jsx (admin.js:60)
    at __webpack_require__ (manifest.js:713)
    at fn (manifest.js:118)
    at eval (client:3)
    at Object.3 (admin.js:4283)

and the warning

loadable-components.es.js:101 loadable-component client modules: {../../components/admin/publish: ƒ, ../../components/admin/list: ƒ, ../../components/admin/publish2: ƒ, ../../components/admin/list2: ƒ}../../components/admin/list: ƒ LoadableComponent(props)../../components/admin/list2: ƒ LoadableComponent(props)../../components/admin/publish: ƒ LoadableComponent(props)../../components/admin/publish2: ƒ LoadableComponent(props)__proto__: Object
(anonymous) @ loadable-components.es.js:101
loadState @ loadable-components.es.js:96
loadComponents @ loadable-components.es.js:130
(anonymous) @ index.jsx:427
./client/pages/admin/index.jsx @ admin.js:60
__webpack_require__ @ manifest.js:713
fn @ manifest.js:118
(anonymous) @ client:3
3 @ admin.js:4283
__webpack_require__ @ manifest.js:713
webpackJsonpCallback @ manifest.js:26
(anonymous) @ admin.js:1
loadable-components.es.js:103 loadable-component server modules: {children: Array(1)}children: Array(1)0: {id: "../../components/admin/publish-1"}length: 1__proto__: Array(0)__proto__: Object

[jsauca]

I have the same issue and errors as above with version Loadable Components 2.2.3 and Webpack HMR.
I have used the temporary solution of @antonybudianto and it is seems to be working.

[gregberge]

HMR is not supported in the new version (I think @theKashey could have an idea to support it). I close it because it concerns loadable v2, feel free to reopen a new issue.

[mbrochh]

@neoziro do I understand correctly that this problem will be solved in loadable v3, or even v4 (it seems you are working on v4 already?)

also, @antonybudianto 's solution doesn't seem to work for me. With this workaround, the issue seems to happen less frequently, but it still happens.

[gregberge]

HMR is supported in v4, but React Hot Loader is not supported.

[theKashey]

Not yet supported?

[gregberge]

React Hot Loader is maybe supported 😅

[gregberge]

I made a test using razzle. Everything is working as expected. If you experience any problem with Hot Reloading, please open a new issue.

This one was about v2.x, today v5 has been rewritten from scratch and has nothing in common with this issue.