loadable-components: HMR not working

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:

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

Any pointers will be helpful, thank you!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 16 (6 by maintainers)

Commits related to this issue

fix: fix SSR with HMR #85 — committed to gregberge/loadable-components by gregberge 6 years ago
Merge pull request #88 from smooth-code/fix-ssr-hmr fix: fix SSR with HMR #85 — committed to gregberge/loadable-components by gregberge 6 years ago

Most upvoted comments

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 😄

antonybudianto on May 18, 2018

Have the same issue 😦

olehreznichenko on May 15, 2018

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

ahungrynoob on Sep 3, 2018

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

antonybudianto on Aug 2, 2018

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

gregberge on May 17, 2018