Updated
—
2 min read
Mantine UI + NextJS Hydration Error Fixes
If using Mantine UI with NextJS (as per this guide), you may encounter a hydration error like this:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
Mantine components cannot be used as server components. But you don't need to add use client directive either.
htmlFor Hydration Error
If using components like TextInput, the hydration error might show:
+ htmlFor="mantine-_R_talatulb_" - htmlFor="mantine-_R_3lamatulb_"
The solution here is to always add an id to the TextInput component.
<TextInput id="email" // add this label="Email" placeholder="Enter your email" required type="email" name="email" />
This will ensure that the htmlFor attribute is set to the correct value on the client side.
Theming Hydration Error
A common cause of this error is the data-mantine-color-scheme attribute being set to light or dark in the server-rendered HTML.
If using the app router, you can fix this by adding the mantineHtmlProps in your layout.tsx file:
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from "@mantine/core"; import "@mantine/core/styles.css"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en" {...mantineHtmlProps}> <head> <ColorSchemeScript /> </head> <body> <MantineProvider> {children} </MantineProvider> </body> </html> ); }
Read more on this Github issue.
Join my newsletter for lessons, experiments, and failures in bootstrapping online businesses.
Sign up if you're curious. I’ll only email you if it's actually good.
Meet the Author
Ryan Chiang
Hello, I'm Ryan. I build things and write about them. This is my blog of my learnings, tutorials, and whatever else I feel like writing about.
What I'm currently building →.