SSR Hydration Error: RAC 1.1.1 Select

[agscala]

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.

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