Hydration Mismacth from NextThemesProvider: Warning Extra attributes form the server: class, style... #168
Assignees
Labels
bug
Something isn't working
Comments
|
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 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>
);
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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):
The text was updated successfully, but these errors were encountered: