adobe / adobe/react-spectrum

SSR Hydration Error: RAC 1.1.1 Select

Open
#6,214 1 comment 1 reaction 0 assignees View on GitHub
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.

![image](https://github.com/adobe/react-spectrum/assets/73444/fdb68968-6046-4534-a132-a269eb3f2a25)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.