Error providing theme object in Provider

anthonyrovira commented 1 year ago

Hello, I'm trying to provide a theme object in my Mantine Provider but I guess with RSC it's not allowed because my Layout is considered as a server component.

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">
      <head>
        <ColorSchemeScript />
        <link rel="shortcut icon" href="/favicon.svg" />
      </head>
      <body>
        <MantineProvider theme={theme}>{children}</MantineProvider>
      </body>
    </html>
  );
}

Here is the error message I get : Error: Attempted to call createTheme() from the server but createTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

I'm quite new with both RSC and mantine. Could you explain what could be the good way to set my theme ? Thanks

rtivital commented 1 year ago

The error seems to be clear enough – do not call createTheme in files without 'use client';

olalonde commented 1 year ago

Can you give an example of how to use theme in the repo?

mantinedev / next-app-template

Error providing theme object in Provider #3