waxen relic
Hi there! After adding ThemeProvider, a hydration error occurs: "Hydration failed because the server rendered HTML didn't match the client". The error appears when refreshing the page in the browser. Saving code changes temporarily resolves the error, but it returns upon the next page refresh.
near echo
use ***suppressHydrationWarning ***, this may fix the issue
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }: RootLayoutProps) {
return (
<>
<html lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</>
)
}
waxen relic
import { ThemeProvider } from "@/components/theme-provider"
export default func...
Can you please tell me where to insert this code? I'm following the tutorial strictly, do I need to insert it into provider.tsx?
I also wanted to ask if it's normal that unexpected errors occur, although everything is clear in the tutorial? I just can't even repeat it - errors constantly occur. How do you live with this?)
near echo
Share your theme-provider code
waxen relic
Here
near echo
Share the code where u have used <ThemeProvider></ThemeProvider>
waxen relic
Sure
near echo
in the html tag, add ***suppressHydrationWarning *** after lang attribute
like this <html lang="en" suppressHydrationWarning>
waxen relic
Thank you very much! The error is gone! Does this eliminate the root cause of the error?
Why does this happen, I try to repeat exactly after the Guru in the tutorial and I get errors
near echo
Yes this is the recommended way to remove the error
directly coming from next.js docs
This happens due to Server side rendering may be, exact reason I also don't know
Have to study about it mate
waxen relic
Ok, thank you Bro!
The first 30 minutes of the tutorial have been taking me two days already, but I think I made the main screen. I wonder if this is the longest way - to try to repeat it? Or is it better to try to find some training... Although this is also training...
near echo
You can follow the tutorial, but at the same time try to understand the code
Do refer the documentation of whatever technology is being used
Here is the link to the docs for current issue
Have a good day, keep learning
waxen relic
Thank you very much!!!
near echo
most welcome