🐛 BUG: React component hydration error when loaded with client:only

[jhuleatt]

What version of astro are you using?

1.0.0-beta.2

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

@astrojs/react: 0.1.0

React components loaded with client:only show a hydration error:

The component still works, it just makes React unhappy. client:only skips the component at build time, so there's nothing to hydrate. React components rendered withclient:only should probably use createRoot instead of hydrateRoot:

astro/packages/integrations/react/client.js

Line 6 in 1335797

hydrateRoot(

Though in looking at the code, there is a suppressHydrationWarning flag - is that related?:

astro/packages/integrations/react/client.js

Line 10 in 1335797

{ ...props, suppressHydrationWarning: true },

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-2hpcon

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks! can you submit a PR for this?

[tony-sull]

Looks like this also causes a similar warning in Vue,

• [Vue warn]: Attempting to hydrate existing markup but container is empty. Performing full mount instead.

[pmochine]

I get the same warning @matthewp with vue, but I cannot PR it though 🙈.
Here is a link with the warning: https://stackblitz.com/edit/github-rfuoqw?file=src%2Fcomponents%2FSwiperWrapper.vue&on=stackblitz (Have a check in the console after vite has connected)

[JLarky]

I managed to reproduce the issue https://youtu.be/kSgRvK0xWLw?t=6965

The solution is to remove suppressHydrationWarning from packages/integration/react/client.js and use createRoot or hydrateRoot depending if the element has existing HTML (that was rendered on the server) in it or not

[bholmesdev]

@JLarky Dang, thanks for the detailed livestream there! Almost feels unfair making the PR myself here since you explained it so well... definitely feel free to contribute in the future, but I have a PR coming in 👍

[JLarky]

@JLarky Dang, thanks for the detailed livestream there! Almost feels unfair making the PR myself here since you explained it so well... definitely feel free to contribute in the future, but I have a PR coming in 👍

haha, thanks :) I would definitely help with the code if I had more time :) but I appreciate the kind words about the video :)

[bholmesdev]

@JLarky Well, I spoke too soon there. We actually avoid using render and createRoot over hydrateRoot by design. Using createRoot will blow away any server-rendered children passed to a client:only component. This is why we hydrate with hydration suppression warnings today. We'll need to investigate more fundamental changes for this.

[JLarky]

right, that's what I was talking about :) you have to intelligently use one or the other, otherwise, it will either be not working (doing hydrateRoot when no HTML is there in client:only instead of createRoot) or show warnings (trying to re-hydrate existing HTML with createRoot instead of hydrateRoot).

[bholmesdev]

@JLarky Correct, that's what I implemented! I just got some conflicting feedback from the team about whether createRoot will work with our bundling and hydration strategy. Hate to say it's much different than standard React children. Checking that this is a safe change to make 👍

[CreativeSight]

Hey guys issue is back?
Astro 4.9.3
React 18.3.1
React Hook Form 7.51.5

Static exported build got same error with hydration in two different projects
and error is explained here -> https://react.dev/errors/418?invariant=418

[julien-e]

Hello,

Same error

Astro 4.12.1
React 18.3.1

[ematipico]

@julien-e open a new issue