search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.72k stars 1.09k forks source link

SSR Hydration Error: RAC 1.1.1 Select #6214

Open agscala opened 5 months ago

agscala commented 5 months ago

Provide a general summary of the issue here

NextJS 14 emotion 11

minimal repo to reproduce: https://github.com/agscala/aria-select-emotion-bug

NextJS in an SSR environment (react server components are disabled): RAC's Select component fails to hydrate properly if one if its children have styles set via emotion.

image

I think the issue stems from the usage of the internal Hidden component here with its implementation relying on template: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/Select.tsx#L133-L144

https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/utils.tsx#L344

I think this is the correct place to file this bug, but let me know if I should reach out to emotion instead!

🤔 Expected Behavior?

Select should render and hydrate via SSR properly

😯 Current Behavior

NextJS errors during hydration, saying the client-rendered Select doesn't match the server-rendered Select

💁 Possible Solution

There may be an issue with the Hidden implementation used in Select. Possibly this should be reworked to not use a template (like withVisuallyHidden)

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/agscala/aria-select-emotion-bug

npm install
npm run dev

go to localhost:3000

The code in question is all in this page:

https://github.com/agscala/aria-select-emotion-bug/blob/main/app/page.tsx

Version

react-aria-components 1.1.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

Engineering

🕷 Tracking Issue

No response

mikewesthad commented 1 week ago

We are having the same issue in our Next + emotion codebase. We cannot use Select in an SSR situation. We've patched it internally by returning null if we're in an SSR render, but that's suboptimal. Any updates here?