New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
4.12.13 breaks hot reloading in some cases #1342
Comments
For me it was related to react-loadable (dynamic import). If i try to force update component, It works: shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
setTimeout(() => {
this.forceUpdate();
}, 0);
return true;
} |
So it's a old good "not updating the tree" problem:
And one of the changes in v13 was about |
I have exactly the same problem with lazy/suspend as with the axios import in the example, but on importing a css file instead. P.S: Just tested my code with 4.12.10 and 4.12.11 and works fine. Seems a bug in 4.12.13. |
I believe I have a similar issue. I just tried downgrading to .12 with no luck. Any suggestions on how to debug this would be appreciated. |
@alexseitsinger - as long as downgrade hasn't helped you - your issue is not the same. It's known that there was some issue prior v13, especially with hooks, but I am still not sure why it's not working sometimes (even if I have an example where it does not work) - all tests, and all the simple examples are working perfectly. |
I see. Okay. In my case, it seems that updating something like It seems likely this may be related to something outside of react-hot-loader, but I don't have a good idea of how to debug the issue. I have tried changing my webpack settings, among other things with no luck. Anyway, sorry to redirect the focus here. Perhaps I should open another ticket? |
Yeah, I never seen such time traveling before. It should be theoretically impossible. |
I suspect it is an issue with Emotion, rather than RHL. Regardless, thanks for your feedback. |
Long story short - the problem is not within RHL. I don't found the root cause, but found a way to solve the problem. Let me first recall why Hot Loader was created - after Hot Module Update you are starting to using a new generation of components, which are not ref equal to the old one, and React kills the "old" tree. I did a quick check - in So another fix - is to override "old" types in the underlying |
fix: resolve all components to their last versions, #1342
released as In short - everything always should be up to date. |
@theKashey thanks, I update to new version and my issues got resolved, everything now goes fine. |
@theKashey thanks a lot for this. Tried 4.12.14 and it works fine to me now. :) |
What a relief :) Gonna close this issue then. |
Description
In some cases hot updates are not applied, although the console says it has updated the changed modules and that the app is now up to date.
See the repo below for reproduction or this video: https://www.dropbox.com/s/4v0gxbkn9ytsvt7/react-hot-loader-4.12.13.mov?dl=0.
Previous version (4.12.12) works fine though.
Expected behavior
Hot updates are applied.
Actual behavior
Hot updates are not applied in some cases.
Environment
React Hot Loader version:
4.12.13
Run these commands in the project folder and fill in their results:
node -v
: v12.10.0npm -v
: 6.10.3Then, specify:
Reproducible Demo
https://github.com/egorovli/react-hot-loader-4.12.13-demo
First, open
./pages/index.jsx
. Note that there is an unusedaxios
import on top. Try changing the text inside the component to something different (e.g. "Hello, world"). Nothing should change. Then, change the text into something different again (e.g. "Foo bar"). Notice how it changes to the previous value now ("Hello, world").Now, remember the unused
axios
import. Remove it. Now the hot reloading should work as expected.The text was updated successfully, but these errors were encountered: