Loadable-components: Hot reload not work in v1.2.0

[wellyshen]

Hi I upgraded to v1.2.0 but I found my async component doesn't be hot reloaded without this way.

[gregberge]

It is weird, I tested it and it should work. As soon as I have a moment I will try to run your project to see what's going on.

[wellyshen]

It can be reproduced via this branch.

[Kmaschta]

I can confirm: it have the same issue that is resolved with react-hot-loader, but not without it, whether the config hotReload is enabled or not.

[gregberge]

Oh maybe I was not clear but React Hot Loader is still required. But it is not required to put hot(module) in all loadable components.

[gregberge]

@wellyshen problem solved? branch disappeared

[wellyshen]

@neoziro Not yet. Sorry I moving the repo to master. And this issue still can be reproduced via it.

[tommyalvarez]

@wellyshen @neoziro same error with version 1.3.0

[gregberge]

@tommyalvarez what error?

[tommyalvarez]

@neoziro the one on this issue, that components loaded through this library are not hot reloaded unless you do something like this:

// Component split-code (lazy load)
let Dashboard = loadable(() => import('./Dashboard'))
let SignIn = loadable(() => import('./SignIn'))
let PasswordReset = loadable(() => import('./PasswordReset'))
let PasswordResetEdit = loadable(() => import('./PasswordResetEdit'))

// Needed for HMR
if (__DEV__) {
  Dashboard = hot(module)(Dashboard)
  SignIn = hot(module)(SignIn)
  PasswordReset = hot(module)(PasswordReset)
  PasswordResetEdit = hot(module)(PasswordResetEdit)
}

Notice the Needed for HMR comment part, had to do that in order for HMR to work on those modules. Otherwise i would change code and the UI won't until i had refresh the browser

[tommyalvarez]

@neoziro now i have a strange bug that no matter the route, it will always load the same Component. I think it has something to do with this: https://stackoverflow.com/questions/44349667/react-router-v4-rendering-wrong-component-but-matching-correctly but since i'm not following the same pattern i'm not finding a clear way to solve it :S. If i remove the if (__DEV__) block, it works okay but no hmr :(

[gregberge]

You setup is not good, "module" must be the dist module, you have to put it in each file: "Dashbord.js", "Signin.js", etc...

But it should work without it, it is weird.

[tommyalvarez]

@neoziro Oh, but if i do that, will it work once in production mode where there is no hot reload ?
I verified now and it works BUT i need to make two modifications to the file, it's like it falls one step behind. I have to make two different changes to the file for the HMR to work.

[gregberge]

Yes as mentioned in RHL readme.

Yes I know that is very annoying... I would try to find a fix.

[gregberge]

@wellyshen just tested it and it works in your project. Is the problem solved?

@tommyalvarez I tested it and Hot Reload works out of the box. Be careful of following all three steps: https://github.com/gaearon/react-hot-loader#getting-started

I close it, if Hot Reload does not work it is a problem of React Hot Loader setup.

[wellyshen]

@neoziro It works with a component which is wrapped by hot(module). The component (e.g. Home) can't work without hot(module) in v1.3.0.

[gregberge]

You can remove hot(module) in Home. I just tested it and it works. Only one at the root (App) and everything works.

[wellyshen]

@neoziro Oh I think I know the reason. Because of the react-router's route config API so I'm using <AppContainer> instead of hot(module). Can loadable-components works with <AppContainer> way? I think it's annoying to use both <AppContainer> and hot(module)...

[gregberge]

@wellyshen I am not sure, I think hot(module) is required, sorry..

[wellyshen]

@neoziro OK, I got it. Thank you for your time 👍