adobe / adobe/react-spectrum

React Suspense components wrapped in Provider emit runtime errors when using SSR

Open
#6,728 6 comments 1 reaction 0 assignees View on GitHub
needs investigation
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

We've encountered an unexpected runtime error while attempting to server-side render `` lazy-loaded components using Next.js.

### 🤔 Expected Behavior?

When using a React `` component inside a ``, there should be no runtime error emitted and the boundary should not switch to client rendering.

### 😯 Current Behavior

The browser displays the following error message when the `` component is rendered.

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

We receive this error consistently if the `` component is mounted inside a React Spectrum 3 `` irrespective of the prop values provided.

### 💁 Possible Solution

My theory is that this is related to hooks like useMediaQuery() which are used in the Provider and implicitly cause an update client-side after or during hydration (but I'm not an expert here).

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

I've prepared a minimal CodeSandbox to demonstrate the error: [CodeSandbox Devbox](https://codesandbox.io/p/devbox/rs3-nextjs-7kfqd6?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyd3ndon00062e6aas312ier%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyd3ndon00022e6ajlgemb5c%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyd3ndon00042e6aurbj650t%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyd3ndon00052e6aa5btib3m%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyd3ndon00022e6ajlgemb5c%2522%253A%257B%2522id%2522%253A%2522clyd3ndon00022e6ajlgemb5c%2522%252C%2522activeTabId%2522%253A%2522clyd3xwjr00022e6aehq03yl2%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyd3ndon00012e6an9ekvkli%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpages%252F_app.tsx%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A2%252C%2522endLineNumber%2522%253A2%252C%2522startColumn%2522%253A10%252C%2522endColumn%2522%253A100000009%257D%255D%252C%2522id%2522%253A%2522clyd3wwyf01aq2e6a8occbo8j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clyd3xwjr00022e6aehq03yl2%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A15%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A15%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fpages%252Ftest%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clyd3ndon00052e6aa5btib3m%2522%253A%257B%2522id%2522%253A%2522clyd3ndon00052e6aa5btib3m%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clyd3z54z00622e6arjhnzwsz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252Ftest%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clyd3z54z00622e6arjhnzwsz%2522%257D%252C%2522clyd3ndon00042e6aurbj650t%2522%253A%257B%2522id%2522%253A%2522clyd3ndon00042e6aurbj650t%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyd3q8fr006v2e6atq2r5gzr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clyd3q8i6007mdagecikb043a%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clyd3sjf400l42e6aaff1mva8%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clyd3sjf400l42e6aaff1mva8%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D). This sandbox has Next.js 14, with React Spectrum 3.35.1 and the next.config.js changes advised to enable CSS bundling with Next.js.

Simply open the Sandbox and navigate to `/test` (if not already displayed).

### Version

3.35.1

### 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 Sonoma

### 🧢 Your Company/Team

Adobe/Business Essentials

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