Issue with Using virtualColor in NextJs 15

[kc-nxtbig]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

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

^7.14.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

I have attempted to use virtualColor as given in the documentation at: https://mantine.dev/theming/colors/ under the virtualColor section in NextJs Version 15.0.3 using App Router. Here is the code in the layout.tsx file at the root:

import { ColorSchemeScript, createTheme, MantineProvider, virtualColor } from '@mantine/core'; const theme = createTheme({ colors: { primary: virtualColor({ name: 'primary', dark: 'pink', light: 'cyan', }), }, cursorType: 'pointer', });

Atempting to use virtualColor throws the following error:

Error: Attempted to call colorsTuple() from the server but colorsTuple 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.

import { registerClientReference } from "react-server-dom-turbopack/server.edge"; export const colorsTuple = registerClientReference( function() { throw new Error("Attempted to call colorsTuple() from the server but colorsTuple 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."); }, "[project]/node_modules/@mantine/core/esm/core/MantineProvider/color-functions/colors-tuple/colors-tuple.mjs <module evaluation>", "colorsTuple", ); { page: '/' }

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

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.15.1