hot-module-replacement not working with React 18 hydrateRoot

[dnish]

Hey, I'm trying to use hot-module-replacement with React 18 and the new hydrateRoot function, because we also use SSR. When editing a file, I get a HMR: updated 1 file within the console, but the page/component doesn't update. I tried it several times, I always need to reload the whole page by myself. When I downgrade to React 17 and use the old hydrate function, everything works fine again. So there seems to be a change within React 18 which prevents refreshing the component.

I've tested it on Meteor 2.7.3.

[zodern]

We need to update to the latest version of react-refresh.

[rj-david]

@dnish when using React 18 + Meteor + SSR, are you not experiencing fibers issues?

When we upgraded previously, and then run our app in a test that tries to load 1000 different pages at the same time, a lot of pages have the wrong output. Seems the new rendering engine of React 18 does not play well with SSR and fibers.

We are waiting for the removal of fibers but you might have a solution for SSR

[alimgafar]

@rj-david are you saying that React 18 doesn't play well with Meteor because of fibers? That we'll need to move off fibers first before Meteor apps can use React 18? Trying to understand.

[rj-david]

@alimgafar for our use case, the SSR failed and we "assumed" it was fibers e.g. wrong context data being used on some pages during parallel renderd. We never heavily tested it outside SSR since we deduced we cannot use it so we rollback to React 17.

Again, that was an assumption that fibers was the cause.

https://forums.meteor.com/t/react-18-is-out/57762

[welkinwong]

same question, wait for meteor upgrade.