I'm getting the error "app-index.js:33 Warning: Extra attributes from the server: class,style"
Answered
treconyl posted this in #help-forum
treconylOP
I'm getting the error "app-index.js:33 Warning: Extra attributes from the server: class,style" when using the package "next-themes": "^0.3.0"
The specific error is here, next-theme automatically adds these 2 attributes to the <html tag automatically class="light" style="color-scheme: light;" causing this error, but when I add it manually, when changing dark-mode or light-mode, it displays the above error, does anyone have this problem like me and how to fix it
<html lang="vi" >
<body>
<Providers>
<div className={
{children}
</div>
</Providers>
</body>
</html>
The specific error is here, next-theme automatically adds these 2 attributes to the <html tag automatically class="light" style="color-scheme: light;" causing this error, but when I add it manually, when changing dark-mode or light-mode, it displays the above error, does anyone have this problem like me and how to fix it
<html lang="vi" >
<body>
<Providers>
<div className={
${inter.className} dark:bg-black bg-white text-sm}>{children}
</div>
</Providers>
</body>
</html>
Answered by James4u (Tag me if needed)
Add
https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning
suppressHydrationWarning to the <html> tag. https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning
7 Replies
Bhotia
Where you able to fix the issue ? I have the same problem
Add
https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning
suppressHydrationWarning to the <html> tag. https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning
Answer
@Bhotia @treconyl
treconylOP
<html suppressHydrationWarning> be resolved
mark solution if it helped you!
@treconyl
treconylOP
thanks y @James4u (Tag me if needed)