SSR Hydration Error: RAC 1.1.1 Select
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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 with`VisuallyHidden`)
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
https://github.com/agscala/aria-select-emotion-bug
```
npm install
npm run dev
```
go to [localhost:3000](http://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_
Contributor guide
Assessment
This issue has not been assessed yet.