MantineProvider causes hydration error on Nextjs 15

davidchalifoux commented 6 hours ago

Dependencies check up

[X] I have verified that I use latest version of all @mantine/* packages

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

[ ] I would be willing to implement a fix for this issue

davidchalifoux commented 5 hours ago

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 data-mantine-color-scheme="light" to <html> in my root layout so there isn't a mismatch:

<html lang="en" data-mantine-color-scheme="light">

This is fine for me because the project is only using the light scheme.

Pirulax commented 3 hours ago

Interesting, according to the docs data-mantine-color-scheme should be set by MantineProvider. (Source) [As a sidenote: I can also confirm this issue, I just ran npx @next/codemod@canary upgrade latest and got it... Was about to open an issue for the nextjs template]

mantinedev / mantine