Skip to content
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

Does reload with HotModuleReplacementPlugin #8

Open
blasterbug opened this issue Apr 23, 2019 · 16 comments
Open

Does reload with HotModuleReplacementPlugin #8

blasterbug opened this issue Apr 23, 2019 · 16 comments

Comments

@blasterbug
Copy link

After adding the configurations from the README.md, with Webpack hot module replacement does not work anymore. I have to refresh the page myself to reload the components.

@theKashey
Copy link
Contributor

This package does not change anything in HMR. The problem is somewhere else.

@blasterbug
Copy link
Author

So why I have this problem only when I use this module? ✌🏻
I am surprised to experience this issue too

@theKashey
Copy link
Contributor

Sorry - have to the idea. In my cases, it does work well. I am not sure why it not the same for you.

@SebastienGllmt
Copy link

I have the exact same issue. Did you find any way to resolve this?
In both the browser console logs and my terminal I still see HMR working just as expected but nothing in the UI changes. If I remove the alias in my webpack config everything works again.

@theKashey
Copy link
Contributor

Any example to play with?

@zstiu
Copy link

zstiu commented Apr 28, 2020

I have the exact same issue. Did you find any way to resolve this?
In both the browser console logs and my terminal I still see HMR working just as expected but nothing in the UI changes. If I remove the alias in my webpack config everything works again.

Hi, here get the same issue, seem like something wrong about @hot-loader/react-dom.
At first, HMR work fine.
But after I add this:

    alias: {
      ......
      'react-dom': '@hot-loader/react-dom'
    }

components appear nothing changed after I edit component file, but still browser console logs show [HMR] App is up to date.
So I guess this is because of @hot-loader/react-dom, but also think about: is there anything else should do, except https://github.com/gaearon/react-hot-loader#hot-loaderreact-dom shows.
Any body know about this?
use version:

    "@hot-loader/react-dom": "16.8.3",
    "react": "16.8.3",
    "react-dom": "16.8.3",

@zstiu
Copy link

zstiu commented Apr 28, 2020

@zstiu
Copy link

zstiu commented Apr 28, 2020

Found that when I use @hot-loader/react-dom, the Components using dynamic imports func(() => import('@pages/exampleComponent')) experience different, just like I described above, Components appear nothing changed after I edit component file. While import Components from 'src/some/path' can HMR correct .
But it is normal without using @hot-loader/react-dom.
I'm not sure is it a problem about @hot-loader/react-dom, if it's not, please ignore💨💨

@theKashey
Copy link
Contributor

That's interesting. Linking to gaearon/react-hot-loader#1425

@zstiu
Copy link

zstiu commented Apr 29, 2020

Seem something different.
First of all, my react version is 16.8.3, so I can see warning
react-🔥-dom patch is not detected. React 16.6+ features may not work.
Components can rerender, but state can't remain.
To fix it, I add @hot-loader/react-dom, after that, it actually HMR with state remain, except in dynamic imports, dynamic imports' Components did not rerender.

And after disabling trackTailUpdates, dynamic imports' Components can rerender, but it rerender without changes. The example is that I change a string <div>Add one </div> to <div>Add two </div>, it will rerender, but still show Add one, just like the file was not be edited.

@theKashey
Copy link
Contributor

If you will edit component again to Add three would it display Add two - there is an old friend of mine - an ForgottenUpdate, always one update behind.

@zstiu
Copy link

zstiu commented Apr 29, 2020

Tried it, no matter I edit component to Add three or Add four or anything else, it always display Add one

@theKashey
Copy link
Contributor

😞

@xyy94813
Copy link

xyy94813 commented May 5, 2020

@zstiu
I meet same problem.
Have you found a solution?

@zstiu
Copy link

zstiu commented May 5, 2020

@zstiu
I meet same problem.
Have you found a solution?

Yes, when you use code split in some module, u will need this.
Every export module need HMR itself, means that every code split module need hot():

import { hot } from 'react-hot-loader'
......

export default hot(ExampleComponent)

@xyy94813
Copy link

xyy94813 commented May 5, 2020

@zstiu
Em... huge workload.

But the chunk that auto split by webpack how to wrapper with hot????

Is there are some babel plugin do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants