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.
Meet the Author
Hey! 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 →.