search

TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
24.92k stars 3.07k forks source link

Hydration Error: "An error occurred during hydration. The server HTML was replaced with client content in <astro-island>" (Astro Website) #936 #4974

Closed lucaswalter closed 1 year ago

lucaswalter commented 1 year ago

Describe the bug

Hello, I'm having a bit of trouble tracing down the root of this so forgive me if this is not the correct spot to note this but I wanted to raise an issue to see if anyone else has encountered this or has a path forward.

I am using shadcn inside an Astro project and am attempting to display data in a DataTable component as documented on the shadcn documentation site. When I attempt to run the website locally, I get this hydration error when trying to apply custom formatting or JSX to the header or cell items on my ColumnDef. An error occurred during hydration. The server HTML was replaced with client content in 'astro-island'

I've been able to reproduce this exact same issue on a fresh repro project after following these exact steps:

Here is the repro link which uses exact same component as in the docs: https://github.com/lucaswalter/astro-shadcn-tanstack-repro/blob/main/src/pages/index.astro

In short, I am attempting to render and hydrate the DataTable like in the snippet below. Is it currently possible to use the DataTable component in an Astro project?

<Layout title="Welcome to Astro.">
    <main>
        <h1 class="mb-2">
            Welcome to <span class="text-gradient">Astro</span>
        </h1>

                 <!-- Data Table Usage -->
        <DataTable client:load columns={columns} data={data} />
    </main>
</Layout>

Full Strack Trace

react-dom.development.js:86 Warning: Did not expect server HTML to contain a <div> in <th>.
    at th
    at http://localhost:3000/src/components/ui/table.tsx:53:3
    at tr
    at http://localhost:3000/src/components/ui/table.tsx:44:3
    at thead
    at http://localhost:3000/src/components/ui/table.tsx:17:3
    at table
    at div
    at http://localhost:3000/src/components/ui/table.tsx:5:3
    at div
    at DataTable (http://localhost:3000/src/components/data-table.tsx:6:3)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForDeletedHydratableElement @ react-dom.development.js:10477
didNotHydrateInstance @ react-dom.development.js:11424
warnUnhydratedInstance @ react-dom.development.js:12313
warnIfUnhydratedTailNodes @ react-dom.development.js:12707
popHydrationState @ react-dom.development.js:12677
completeWork @ react-dom.development.js:22176
completeUnitOfWork @ react-dom.development.js:26593
performUnitOfWork @ react-dom.development.js:26568
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:86 Warning: An error occurred during hydration. The server HTML was replaced with client content in <astro-island>.
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
errorHydratingContainer @ react-dom.development.js:11473
recoverFromConcurrentError @ react-dom.development.js:25846
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at popHydrationState (react-dom.development.js:12678:9)
    at completeWork (react-dom.development.js:22176:30)
    at completeUnitOfWork (react-dom.development.js:26593:16)
    at performUnitOfWork (react-dom.development.js:26568:5)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
throwOnHydrationMismatch @ react-dom.development.js:12507
popHydrationState @ react-dom.development.js:12678
completeWork @ react-dom.development.js:22176
completeUnitOfWork @ react-dom.development.js:26593
performUnitOfWork @ react-dom.development.js:26568
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26560:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26560
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:19849 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.
    at updateHostRoot (react-dom.development.js:19849:57)
    at beginWork (react-dom.development.js:21615:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26560:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
updateHostRoot @ react-dom.development.js:19849
beginWork @ react-dom.development.js:21615
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26560
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Your minimal, reproducible example

https://stackblitz.com/github/lucaswalter/astro-shadcn-tanstack-repro

Steps to reproduce

See the repro project here: https://github.com/lucaswalter/astro-shadcn-tanstack-repro/blob/main/src/pages/index.astro#L41 or StackBlitz

  1. Clone repro project
  2. Install dependencies
  3. Run npm run dev
  4. Open in browser and see error in console

Expected behavior

As a user, I expect to be able to provide custom cell and header JSX which will render and hydrate on my website.

How often does this bug happen?

Every time

Screenshots or Videos

image

Platform

react-table version

^8.9.3

TypeScript version

N/A

Additional context

Astro: ^2.8.3

Full Dependencies:

  "dependencies": {
    "@astrojs/react": "^2.2.1",
    "@astrojs/tailwind": "^4.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@tanstack/react-table": "^8.9.3",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "astro": "^2.8.3",
    "class-variance-authority": "^0.6.1",
    "clsx": "^1.2.1",
    "lucide-react": "^0.260.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^1.13.2",
    "tailwindcss": "^3.3.3",
    "tailwindcss-animate": "^1.0.6"
  }

Terms & Code of Conduct

lucaswalter commented 1 year ago

(duplicated on creation)