react-aria Table breaks hydration in RemixJS #7088
Description
Provide a general summary of the issue here
Using <Table/> from react-aria-components triggers an error in RemixJS about breaking hydration.
🤔 Expected Behavior?
No errors. No difference between what's rendered in the server and the browser.
😯 Current Behavior
I'm creating an app with RemixJS and react-aria-components.
I want to use the Table component but even when using the static example from docs, an error appears in the console.
Warning: Expected server HTML to contain a matching <head> in <html>.
head
html
Layout@http://localhost:1234/app/root.tsx:4:23
RenderedRoute@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:410:7
RenderErrorBoundary@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:367:5
DataRoutes@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:1403:7
Router@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:759:7
RouterProvider@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:1218:7
RemixErrorBoundary@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:2855:5
RemixBrowser@http://localhost:1234/node_modules/.vite/deps/@remix-run_react.js?v=037ea596:4402:46 react-dom.development.js:86:29
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
React 12
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
scheduler chunk-CSFWTIJP.js:405
scheduler chunk-CSFWTIJP.js:453
__require chunk-VRMXEQCD.js:15
scheduler chunk-CSFWTIJP.js:465
__require chunk-VRMXEQCD.js:15
React 2
__require chunk-VRMXEQCD.js:15
dom React
__require chunk-VRMXEQCD.js:15
<anonymous> @remix-run_react.js:53
react-dom.development.js:12507:8
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
React 8
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
scheduler chunk-CSFWTIJP.js:405
scheduler chunk-CSFWTIJP.js:453
__require chunk-VRMXEQCD.js:15
scheduler chunk-CSFWTIJP.js:465
__require chunk-VRMXEQCD.js:15
React 2
__require chunk-VRMXEQCD.js:15
dom React
__require chunk-VRMXEQCD.js:15
<anonymous> @remix-run_react.js:53
react-dom.development.js:19878:56
Probably related to #4870
💁 Possible Solution
Use ClientOnly but lose SSR.
🔦 Context
Using RemixJS 2.12.1, Node 20, and Linux. React is 18.2.0. RAC is 1.3.3.
🖥️ Steps to Reproduce
Asumming you have created a RemixJS project, create a new route at routes/rac.tsx and then add to the file.
import {
Table,
TableHeader,
Column,
TableBody,
Row,
Cell,
} from "react-aria-components";
export default function RAC() {
return (
<Table aria-label="Files" selectionMode="none">
<TableHeader>
<Column>CHEKC</Column>
<Column isRowHeader>Name</Column>
<Column>Type</Column>
<Column>Date Modified</Column>
</TableHeader>
<TableBody>
<Row>
<Cell>CHEKC</Cell>
<Cell>Games</Cell>
<Cell>File folder</Cell>
<Cell>6/7/2020</Cell>
</Row>
<Row>
<Cell>CHEKC</Cell>
<Cell>Program Files</Cell>
<Cell>File folder</Cell>
<Cell>4/7/2021</Cell>
</Row>
<Row>
<Cell>CHEKC</Cell>
<Cell>bootmgr</Cell>
<Cell>System file</Cell>
<Cell>11/20/2010</Cell>
</Row>
<Row>
<Cell>CHEKC</Cell>
<Cell>log.txt</Cell>
<Cell>Text Document</Cell>
<Cell>1/18/2016</Cell>
</Row>
</TableBody>
</Table>
);
}
Version
RAC 1.3.3
What browsers are you seeing the problem on?
Firefox
If other, please specify.
No response
What operating system are you using?
Linux
🧢 Your Company/Team
N/A
🕷 Tracking Issue
No response