ui icon indicating copy to clipboard operation
ui copied to clipboard

Warning: Prop `className` did not match.

Open nooblyf opened this issue 2 years ago • 4 comments

I'm seeing this error Warning: Prop `className` did not match. Server: "__variable_914793 dark" Client: "__variable_914793" in the browser console whenever my app loads

Here's my layout.tsx

import { ThemeProvider } from "@/components/theme-provider";
import "@/styles/globals.css";
import type { Metadata } from "next";
import { GeistSans } from "geist/font";
import { Navbar } from "@/components/navbar";

export const metadata: Metadata = {
  title: "My App",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={GeistSans.variable}>
      <body className="min-w-[350px]">
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <Navbar />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Does anyone know what's happening here?

nooblyf avatar Oct 29 '23 13:10 nooblyf

I'm facing the same issue its related to next theme and hydration , you can find different solutions here https://github.com/pacocoursey/next-themes/issues/169

I think this one is the best solution https://github.com/pacocoursey/next-themes/issues/169#issuecomment-1733952011

saketverma-03 avatar Oct 29 '23 14:10 saketverma-03

I get this every time I start up a fresh shadcn project with themes.

corysimmons avatar Jan 08 '24 01:01 corysimmons

I'm currently using this <html lang="en" suppressHydrationWarning>

nooblyf avatar Jan 15 '24 16:01 nooblyf

@nooblyf I still get the warning even when using that (that's actually included in the docs).

corysimmons avatar Jan 16 '24 19:01 corysimmons

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

shadcn avatar Feb 13 '24 23:02 shadcn

Hi @shadcn I think I fixed this one here actually https://github.com/shadcn-ui/ui/pull/2324

corysimmons avatar Feb 14 '24 06:02 corysimmons