Help wanted, hydration error on root layout
I'm getting this hydration error on the root layout in the body tag, I'm not sure why tbh
// src/app/layout.tsx
import "~/styles/globals.css";
import { type Metadata } from "next";
import { Geist } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";
import NavBar from "./_components/NavBar";
export const metadata: Metadata = {
title: "Create T3 App",
description: "Generated by create-t3-app",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const geist = Geist({
subsets: ["latin"],
variable: "--font-geist-sans",
});
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${geist.variable}`}>
<body>
<div className="min-h-screen bg-gray-100">
<NavBar />
<main className="lg:ml-64">
<div className="container mx-auto px-4 py-6">
<TRPCReactProvider>{children}</TRPCReactProvider>
</div>
</main>
</div>
</body>
</html>
);
}
// src/app/layout.tsx
import "~/styles/globals.css";
import { type Metadata } from "next";
import { Geist } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";
import NavBar from "./_components/NavBar";
export const metadata: Metadata = {
title: "Create T3 App",
description: "Generated by create-t3-app",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const geist = Geist({
subsets: ["latin"],
variable: "--font-geist-sans",
});
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${geist.variable}`}>
<body>
<div className="min-h-screen bg-gray-100">
<NavBar />
<main className="lg:ml-64">
<div className="container mx-auto px-4 py-6">
<TRPCReactProvider>{children}</TRPCReactProvider>
</div>
</main>
</div>
</body>
</html>
);
}
1 Reply
This is the error from the console
layout.tsx:26 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<HotReload assetPrefix="" globalError={[...]}>
<AppDevOverlay state={{nextId:1, ...}} globalError={[...]}>
<AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>
<ReplaySsrOnlyErrors>
<DevRootHTTPAccessFallbackBoundary>
<HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
<HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<Head>
<link>
<script>
<script>
<script>
<RootLayout>
<html lang="en" className="geist_31c8...">
<body
- jf-observer-attached="true"
>
...
...
<body>
RootLayout @ layout.tsx:26
layout.tsx:26 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<HotReload assetPrefix="" globalError={[...]}>
<AppDevOverlay state={{nextId:1, ...}} globalError={[...]}>
<AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>
<ReplaySsrOnlyErrors>
<DevRootHTTPAccessFallbackBoundary>
<HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
<HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<Head>
<link>
<script>
<script>
<script>
<RootLayout>
<html lang="en" className="geist_31c8...">
<body
- jf-observer-attached="true"
>
...
...
<body>
RootLayout @ layout.tsx:26