adobe / adobe/react-spectrum

I18nProvider breaks client hydration in TanStack Start

Open
#7,474 3 comments 5 reactions 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

TanStack Start utilizes server-side rendering (SSR), which requires wrapping the application with `I18nProvider` to ensure that the locale of the content rendered on the server matches the locale expected by the browser. This requirement is outlined in the [documentation guide](https://arc.net/l/quote/tvsgdvyw).

However, there appears to be an issue with the `I18nProvider` when used within this framework, as it is causing hydration errors.

### 🤔 Expected Behavior?

Hydration should work flawlessly.

### 😯 Current Behavior

Hydration breaks when the application is wrapped with `I18nProvider` and causes the entire page to go blank for a split second as it switches to client rendering.

React warning:
```
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
```

### 💁 Possible Solution

From what I've gathered, `useDefaultLocale()` hook seems to be the culprit here.
https://github.com/adobe/react-spectrum/blob/e14088a7edc44422a1135a9412a99cbbc96c1518/packages/%40react-aria/i18n/src/context.tsx#L29-L31

https://github.com/adobe/react-spectrum/blob/9b249e0479f142919ac67cda322a77eb36d585ac/packages/%40react-aria/i18n/src/useDefaultLocale.ts#L65-L78

Perhaps we should update the state (line 70) using `startTransition`? Not sure, I'm not very Suspense-pilled.

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/tanstack-router-ugkb9t?file=app%2Froutes%2F__root.tsx

Omitting `I18nProvider` gets rid of the above-mentioned React warning in the console logs.

### Version

1.5.0

### What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

### If other, please specify.

_No response_

### What operating system are you using?

macOS 15.1

### 🧢 Your Company/Team

_No response_

### 🕷 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.