It seems mantine is trying to render styles tag. I guess something like this

Screenshot 2024-09-17 205352

It's giving the following error...

Screenshot 2024-09-17 204854 a Screenshot 2024-09-17 204912 Screenshot 2024-09-17 204941 Screenshot 2024-09-17 205004 Screenshot 2024-09-17 204837

Note: you can't run this in codesandbox.io. So please clone the repository and use npm i --legacy-peer-deps when installing dependencies.

If possible, include a link to a codesandbox with a minimal reproduction

https://github.com/MahirAlam/tera-tok

Possible fix

I guess adding precedence="default" will solve the issue?

Self-service

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

Kenzo-Wada commented 1 week ago

maybe this template will help you: https://github.com/mantinedev/next-app-template

MahirAlam commented 1 week ago

maybe this template will help you: https://github.com/mantinedev/next-app-template

Thank you for your reply! I have found the problem.

Pease help me update the docs.

In next js,

<ColorSchemeScript /> Should be used like this or it will give error (at least hydration error)

"use client";

import { ColorSchemeScript, MantineProvider as Provider } from "@mantine/core";
import Head from "next/head";

import { theme } from "@/utils/theme";

const MantineProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <Head>
        <ColorSchemeScript nonce="8IBTHwOdqNKAWeKl7plt8g==" />
      </Head>
      <Provider theme={theme}>{children}</Provider>
    </>
  );
};

export default MantineProvider;

Note: use client is a must

mantinedev / mantine

Getting Notifications.module.css.mjs.map not found and Cannot render a <style> error! #6830

Dependencies check up

What version of @mantine/* packages do you have in package.json?

What package has an issue?

What framework do you use?

In which browsers you can reproduce the issue?

Describe the bug