flat-fuchsia

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the serv

Not happens on every site loading but I am just wondering how can I debug this error? I tried removing everything from the component in __root.tsx. As long as <Script /> is here, the error can happen. I know I don't provide a reproduction here but I am just looking for guesses if any or a way to have a clearer error message? 🙏 The full error message is:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (chunk-TCVF4DG2.js?v=97d84ca1:9520:17)
    at tryToClaimNextHydratableInstance (chunk-TCVF4DG2.js?v=97d84ca1:9541:15)
    at updateHostComponent (chunk-TCVF4DG2.js?v=97d84ca1:14817:13)
    at beginWork (chunk-TCVF4DG2.js?v=97d84ca1:15951:22)
    at HTMLUnknownElement.callCallback2 (chunk-TCVF4DG2.js?v=97d84ca1:3680:22)
    at Object.invokeGuardedCallbackDev (chunk-TCVF4DG2.js?v=97d84ca1:3705:24)
    at invokeGuardedCallback (chunk-TCVF4DG2.js?v=97d84ca1:3739:39)
    at beginWork$1 (chunk-TCVF4DG2.js?v=97d84ca1:19786:15)
    at performUnitOfWork (chunk-TCVF4DG2.js?v=97d84ca1:19219:20)
    at workLoopSync (chunk-TCVF4DG2.js?v=97d84ca1:19158:13)

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (chunk-TCVF4DG2.js?v=97d84ca1:9520:17)
    at tryToClaimNextHydratableInstance (chunk-TCVF4DG2.js?v=97d84ca1:9541:15)
    at updateHostComponent (chunk-TCVF4DG2.js?v=97d84ca1:14817:13)
    at beginWork (chunk-TCVF4DG2.js?v=97d84ca1:15951:22)
    at HTMLUnknownElement.callCallback2 (chunk-TCVF4DG2.js?v=97d84ca1:3680:22)
    at Object.invokeGuardedCallbackDev (chunk-TCVF4DG2.js?v=97d84ca1:3705:24)
    at invokeGuardedCallback (chunk-TCVF4DG2.js?v=97d84ca1:3739:39)
    at beginWork$1 (chunk-TCVF4DG2.js?v=97d84ca1:19786:15)
    at performUnitOfWork (chunk-TCVF4DG2.js?v=97d84ca1:19219:20)
    at workLoopSync (chunk-TCVF4DG2.js?v=97d84ca1:19158:13)

10 Replies

ugly-tan•8mo ago

have you try using suppressHydrationWarning ?

flat-fuchsiaOP•8mo ago

No luck Tanstack Start v1.97.0 I'm so confused, the error can also appear if my __root file is only this:

import css from "@/assets/globals.css?url";
import { DefaultCatchBoundary } from "@/components/DefaultCatchBoundary";
import { NotFound } from "@/components/NotFound";
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { Meta, Scripts } from "@tanstack/start";
import { z } from "@typebot.io/zod";

export const Route = createRootRoute({
  head: () => ({
    links: [{ rel: "stylesheet", href: css }],
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      { title: "Typebot" },
    ],
  }),
  component: RootComponent,
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    );
  },
  notFoundComponent: () => <NotFound />,
  validateSearch: z.object({
    isHeaderOpened: z.boolean().optional(),
  }),
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
      </head>
      <body>
        <Scripts />
      </body>
    </html>
  );
}

import css from "@/assets/globals.css?url";
import { DefaultCatchBoundary } from "@/components/DefaultCatchBoundary";
import { NotFound } from "@/components/NotFound";
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { Meta, Scripts } from "@tanstack/start";
import { z } from "@typebot.io/zod";

export const Route = createRootRoute({
  head: () => ({
    links: [{ rel: "stylesheet", href: css }],
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      { title: "Typebot" },
    ],
  }),
  component: RootComponent,
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    );
  },
  notFoundComponent: () => <NotFound />,
  validateSearch: z.object({
    isHeaderOpened: z.boolean().optional(),
  }),
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
      </head>
      <body>
        <Scripts />
      </body>
    </html>
  );
}

The only way to make it work is to have a empty head:

head: () => ({}),

head: () => ({}),

like-gold•8mo ago

Have you tried running your app on incognito? Sometimes this happen because of a chrome extension.

flat-fuchsiaOP•8mo ago

Thank you for the help!! I figured this happens only when using content-collection (@content-collections/vite package). To reproduce: 1. https://github.com/ally-ahmed/tss-blog-starter 2. Install packages and run dev command 3. See the error on page load 4. Refresh and the error goes away To reproduce it again, remove the vinxi cache and run it again you'll see the error on each first load

GitHub

GitHub - ally-ahmed/tss-blog-starter: A blog/portfolio starter proj...

A blog/portfolio starter project built with TanStack Start. - ally-ahmed/tss-blog-starter

flat-fuchsiaOP•8mo ago

cc @Ahmed Ali ( ..)(..)(._. )

flat-fuchsiaOP•8mo ago

content-collections maintainer is working on a Vinxi adapter hopefully this will fix it: https://github.com/sdorra/content-collections/issues/450

GitHub

Support Tanstack Start · Issue #450 · sdorra/content-collections

ambitious-aqua•8mo ago

@Baptiste Just re-created this bug. Yeah it looks like it is content-collections. Thank you for narrowing it down. I know it can take same time and a lot of hair pulling trying to figure out the culprit.

ambitious-aqua•8mo ago

@Baptiste Actually, the content-collections seems to think it is content-collections causing the hydration error. Let me confirm again. Not sure if this tool is out but something like this will be really helpful https://x.com/aidenybai/status/1878498426704543906

Aiden Bai (@aidenybai) on X

i made a tool to mark React Hydration errors in your app

flat-fuchsiaOP•8mo ago

Omg yessss I tried the new vinxi adapter the maintainer is working on: https://github.com/sdorra/content-collections/pull/458. It fixes the issue 🙌

ambitious-aqua•8mo ago

@Baptiste The new update is breaking for me in prod. Could you please delete the .content-collections folder and try to build for prod. The .content-collections folder is not being created automatically. Maybe I need to use the content-collections cli with concurrently https://content-collections-git-feature-450supporttanstackstart-nitilon.vercel.app/docs/quickstart/cli

CLI

Setup guide for the Content Collections CLI

Gaming

Programming

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the serv

Did you find this page helpful?