search

nicoalbanese / kirimase

Build full-stack Next.js apps, incredibly fast
https://kirimase.dev
MIT License
2.37k stars 107 forks source link

Hydration Mismacth from NextThemesProvider: Warning Extra attributes form the server: class, style... #168

Open gaurangrshah opened 3 months ago

gaurangrshah commented 3 months ago

Config File

{
  "hasSrc": false,
  "packages": [
    "shadcn-ui"
  ],
  "preferredPackageManager": "pnpm",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": "",
  "componentLib": "shadcn-ui",
  "auth": null
}

Describe the bug I am not sure if this is true for others, but I've seen this hydration warning in every project I've scaffolded with kirimase so far. I've been meaning to track down the bug and finally got some time.

Seems the NextThemesProvider is causing the hydration mismatch. The fix I found for it was to dynamically import the component and seems to work on my end. Wanted to share the solution for anyone else facing the same issue. Here's my the commit from my repo where I made the change.

Expected behavior Should not cause hydration issues on a new scaffold.

Screenshots image

Desktop (please complete the following information):

gaurangrshah commented 3 months ago

As per this convo I dug a bit deeper. image

From what I understand this is try this does opt the entire tree below this point which is the entire application. So this made me look for a diff solution, which I found on the next-themes github issue.

Simply adding the suppressHydrationWarning prop at least disables the message. The prop gets added to the html element in layout.tsx:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning> {/* add the prop here */}
      <body className={GeistSans.className}>
        <Providers>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </Providers>
      </body>
    </html>
  );
}