search

gaearon / react-hot-loader

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)
http://gaearon.github.io/react-hot-loader/
MIT License
12.26k stars 801 forks source link

v4 does not use updated non-React modules #949

Open nwoltman opened 6 years ago

nwoltman commented 6 years ago

Description

If a React module depends on a module that is not a React component and the non-React module is updated, the code is hot reloaded but the React module does not use the updated non-React module. This was working in v3 and seems like it should work automatically when using ES2015 modules.

Expected behavior

The React module should use the updated non-React module. This was working as expected with react-hot-loader@3.1.3.

Actual behavior

The React module continues to use the old non-React module.

Environment

React Hot Loader version: 4.1.2, 4.3.0+

Irrelevant version info 1. `node -v`: 10.15.1 2. `npm -v`: 6.4.1 And 1. Operating system: Windows 10 2. Browser and version: Chrome 72

Reproducible Demo

https://github.com/nwoltman/rhl-bug-repro

Follow the instructions in the README. When you modify the sanitizeEmail function, the console shows that HMR worked, but when you type in the text input on the page, it seems to still be using the old sanitizeEmail function.

If you change the react-hot-loader version in package.json to 3.1.3 (and uncomment 'react-hot-loader/patch' in webpack.config.js) 4.2.0 (this bug was temporarily patched in that version), it works as expected.

theKashey commented 6 years ago

The problem - RHL do have a logic to "update" bound methods, and it is straightforward - If a method was changed - update it! Here - there is no change the method itself, only in the external variable it uses. As result - we are not updating it.

The only possible change - always update all the bound/arrow methods.

theKashey commented 6 years ago

Thank you. That was a major bug.

nwoltman commented 6 years ago

No problem! Great to see that you got a fix ready so quickly 😃

DorianBlues commented 6 years ago

in v4, when I change the method in some components, the hot reload not work, but if I change its parent components methods which as props pass to it, the hot reload worked fine. I wonder is this the same problem above？

theKashey commented 6 years ago

@TSL112358 - sounds like something different. But it sounds similar to #944 If you have an easy example - please share. I need it.

yangmingshan commented 6 years ago

In our application, update a non-React module will cause page reload (not hot reload). Is this a right behavior? Or I'm using the wrong way.

react-hot-loader 4.1.2 node 9.11.1 chrome 66 macOS 10.13.4

theKashey commented 6 years ago

If "propagation" change bubling will not "hit" hot (or module.hot) - it will trigger will page reload. This is very handy, when you are updating something that could not be hotreloadable, redux store, for example. Just double check console output.

akhayoon commented 6 years ago

@theKashey Is there any way for me to use this updated code that has the fix?

theKashey commented 6 years ago

We will release a new version today 🤞

nwoltman commented 6 years ago

Fixed in version 4.1.3 🎉

theKashey commented 6 years ago

Sorry breaking this back.

mike1808 commented 5 years ago

@theKashey can you say how we can help with development to fix this issue?

theKashey commented 5 years ago

In short - #1138 I just need some free time to start playing with it. Unfortunately free time is a problem.