React-hot-loader: hot-reload is not working with react-loadable and react-hot-loader.

[SidKwok]

Description

Maybe Bug. Hot-reload is not working with react-loadable and react-hot-loader.

Expected behavior

hot reload for Async Component

Actual behavior

it didn't hot reload

Environment

React Hot Loader version:

v3.1.1 and v3.0.0-beta.7

Run these commands in the project folder and fill in their results:

1. node -v: 6.11.4
2. npm -v: 4.6.1

Then, specify:

1. Operating system:
   macOS 10.13
2. Browser and version:
   chrome 61
   

   Reproducible Demo

Demo

Try to edit code in ./src/SyncView.jsx and everything is fine, but when it comes to ./src/AsyncView.jsx, hot-reload is not working this time. I use react-loadable for code-spliting in ./src/routes/index.js.

[gregberge]

Hot Reloading is not compatible with compatible. Not sure if it is relative to Webpack or React Hot Loader. The current workaround is to disable code splitting in development. You can use a different ./src/routes/index.js in production and in development. I know that it is not the best thing, but it is currently the only workaround.

[SidKwok]

Thanks for your feedback! It sounds reasonable to use different file in development, but it's a little bit annoying to do that. Hope there will be a better way to solve this rhl-and-code-split situation.

[SidKwok]

vue-hot-api doesn't seem to have such issue, maybe it's not related to webpack?

You can use vue-cli to start a new project to test its async-component.

[theKashey]

@SidKwok - thats "ok".
As you may see react-hot-loader will not trigger componentDidMount/Unmount on hot-swap - only redraw. And that is expected behaviour. And thus lost of loaders are not working. They are designed to not work.

You can try:

1. https://github.com/theKashey/react-hot-component-loader - simple as a rock
2. https://github.com/faceyspacey/react-universal-component - for all the things.

They do work - proven.

[SidKwok]

@theKashey Thanks a lot! Both deps solve this issue!

I will try react-hot-component-loader in my project.

[wmertens]

Just a shout-out for https://github.com/faceyspacey/react-universal-component : it can also be super simple:

import universal from 'react-universal-component'

const DeferredHeavyComponent = universal(() => import('./HeavyComponent'))

export default DeferredHeavyComponent

That's it - it works just fine with react-hot-loader.

[theKashey]

Unfortunately you are wrong, @wmertens.
react-universal-component is awesome thing, and it is "HMR-aware" loader, so it will just reload async component, as long react-loadable will not.
But it is not "RHL-aware". The new component will be mounted out of RHL's AppContainer execution context, and as result the first HOC or decorator will break all the stuff. As that happens in RHL v3.

For a good experience component should be wrapped with AppContainer by the time it got updated.
You can wrap your export by yourself, or you can use our helper (hot) to do the same.

So there is the only good answer - if you are going to import component, - wrap it's export with hot. And then use any loader you want to use.

Actually this issue was for RHL v3. Give a try to version 4 right now, it just got that brand new hot method, to help you, I am talking about.

See https://github.com/gaearon/react-hot-loader/tree/next#code-splitting

[wmertens]

Aha, thanks for the explanations @theKashey! I am actually running v4 and just started using react-universal-component, and it seems to work without change, including keeping state, but I'm not sure I tested it 100%.

I saw the hot workaround for lazy imports, but it's actually a bit of work to set (moving original component out of the way, replacing it with wrapped version) vs just using universal().

So far I'm super happy I don't have to step through my state the whole time :)

[theKashey]

Without hot and with react-universal-component RHL will work. Just not as good, as it could with hot :)
Or you can use react-hot-component-loader, I've mentioned above. It will just wrap component with AppContainer by itself.

[ghost]

After upgrading react hot loader to v4, to my surprise, i find that the same issue has been resolved. Not sure if react hot loader has make some underlying changes.