Hi! First of all, thank you for all your work creating this project!
I'm encountering an error when using Mantine with Next.js App Router due to the cssVariablesResolver function being passed to a Client Component:
⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
<... theme={{...}} cssVariablesResolver={function shadcnCssVariableResolver} children=...>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Reproduction steps:
- Set up a Next.js app with App Router
- Integrate Mantine with a custom CSS variable resolver
- Use MantineProvider in the RootLayout component, passing the shadcnCssVariableResolver to the cssVariablesResolver field (as you write in your How to Use guide)
Minor note. To do the first 2 steps, I cloned the official Mantine NextJS App Router template.
Code snippet
app/layout.tsx
import '@mantine/core/styles.css';
import React from 'react';
import { ColorSchemeScript, mantineHtmlProps, MantineProvider } from '@mantine/core';
import { theme } from '../theme';
import { shadcnCssVariableResolver } from '@/cssVariableResolver';
import "@/style.css";
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" {...mantineHtmlProps}>
<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} cssVariablesResolver={shadcnCssVariableResolver}>{children}</MantineProvider>
</body>
</html>
);
}Environment:
- Next.js version: 15.1.5
- Mantine Core version: 7.17.1
- React version: 19.0.0
Expected behavior:
The MantineProvider should accept the cssVariablesResolver function without errors.
Any guidance on the correct approach would be appreciated!
Hi! First of all, thank you for all your work creating this project!
I'm encountering an error when using Mantine with Next.js App Router due to the
cssVariablesResolverfunction being passed to a Client Component:Reproduction steps:
Minor note. To do the first 2 steps, I cloned the official Mantine NextJS App Router template.
Code snippet
app/layout.tsx
Environment:
Expected behavior:
The MantineProvider should accept the cssVariablesResolver function without errors.
Any guidance on the correct approach would be appreciated!