Hydration error on using themeprovider from shadcn/ui

Question

import type { Metadata } from "next";
import { ThemeProvider } from "@/components/theme-provider";
import Navbar from "@/components/navbar";
import localFont from "next/font/local";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "snapnote",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {/* <ThemeProvider */}
        {/*   attribute="class" */}
        {/*   defaultTheme="system" */}
        {/*   enableSystem */}
        {/*   disableTransitionOnChange */}
        {/* > */}
        <Navbar />
        {children}
        <Toaster />
        {/* </ThemeProvider> */}
      </body>
    </html>
  );
}

when i use ThemProvider like this it throws an error like

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used....

How do i fix this need help.

Asian black bear · Accepted Answer

You didn't read the full instructions thoroughly. It tells you to use suppressHydrationWarning.

Hydration error on using themeprovider from shadcn/ui

1 Reply