Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

react-aria Table breaks hydration in RemixJS #7088

Open
fedemp opened this issue Sep 25, 2024 · 1 comment
Open

react-aria Table breaks hydration in RemixJS #7088

fedemp opened this issue Sep 25, 2024 · 1 comment

Comments

@fedemp
Copy link

fedemp commented Sep 25, 2024 •
edited
Loading

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
@snowystinger
Copy link
Member

Any chance you can create a stackblitz to reproduce this? Otherwise it's a little tough to guess what's happening.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@snowystinger @fedemp