MantineProvider causes hydration error on Nextjs 15 #7008
Comments
|
Looks like the error emitted by Next is in a slightly different format so suppressNextjsWarning() won't catch it. In the meantime I was able to get rid of the error by manually adding <html lang="en" data-mantine-color-scheme="light">This is fine for me because the project is only using the light scheme. |
|
Interesting, according to the docs |
|
just add suppressHydrationWarning to html tag |
|
Getting rid of |
|
This PR might solve be relevant #5199 |
|
To fix the issue, set example of the full file import '@mantine/core/styles.css';
import React from 'react';
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from '../theme';
export const metadata = {
title: 'Mantine Next.js template',
description: 'I am using Mantine with Next.js!',
};
export default function RootLayout({ children }: { children: any }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<ColorSchemeScript />
<link rel="shortcut icon" href="/favicon.svg" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/>
</head>
<body>
<MantineProvider theme={theme}>{children}</MantineProvider>
</body>
</html>
);
}Example for pages router in import { Head, Html, Main, NextScript } from 'next/document';
import { ColorSchemeScript } from '@mantine/core';
export default function Document() {
return (
<Html lang="en" suppressHydrationWarning>
<Head>
<ColorSchemeScript />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
} |
|
The issue has been resolved, the documentation has been updated to support next 15 release. All templates have been updated to next 15. You can find full working examples in the corresponding templates. Updated documentation can be found here – https://mantine.dev/guides/next/ |
|
@rtivital does adding the Personaly, I would like not to supress the warnings if possible, as it might be reporting that something is possibly wrong. |
|
The recommended way suppresses warning on the html element only. Hydration warning on the html element is completely useless – it can be produced by any browser extension that modifies html attributes, for example Grammarly, LanguageTool, etc. Putting |
@rtivital I'm using next v14 and put it on body |
|
@rtivital |
|
It is not relevant client or server. Follow the guide, it will work correctly. |
Dependencies check up
What version of @mantine/* packages do you have in package.json?
7.13.3
What package has an issue?
@mantine/core
What framework do you use?
Next.js
In which browsers you can reproduce the issue?
Chrome
Describe the bug
Next.js just released version 15 today.
Testing Mantine with version 15 is resulting in a hydration error caused by
<MantineProvider>, seemingly because the error suppression isn't working. I've included a minimal reproduction on StackBlitz.Thanks for your work!
If possible, include a link to a codesandbox with a minimal reproduction
https://stackblitz.com/edit/stackblitz-starters-avcjyw?file=app%2Flayout.tsx
Possible fix
No response
Self-service
The text was updated successfully, but these errors were encountered: