Hydration Mismacth from NextThemesProvider: Warning Extra attributes form the server: class, style...
gaurangrshah opened this issue · comments
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
Desktop (please complete the following information):
- OS: [MacOS Sonoma]
- Browser [arc, safari]
As per this convo I dug a bit deeper.
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>
);
}