virtualColor always results in build error (NextJS v14)

[jafargas]

Hi all,

I'm trying to use virtualColor() in my theme definition in my next.js app but I get the following error:

TypeError: (0 , _color_functions_colors_tuple_colors_tuple_mjs__WEBPACK_IMPORTED_MODULE_2__.colorsTuple) is not a function
    at eval (./src/app/layout.tsx:25:77)
    at (rsc)/./src/app/layout.tsx (/Users/joan/projects/test/.next/server/app/_not-found/page.js:108:1)
    at Function.__webpack_require__ (/Users/joan/projects/test/.next/server/webpack-runtime.js:33:42)

...

TypeError: (0 , _color_functions_colors_tuple_colors_tuple_mjs__WEBPACK_IMPORTED_MODULE_2__.colorsTuple) is not a function
    at virtualColor (webpack-internal:///(rsc)/./node_modules/@mantine/core/esm/core/MantineProvider/MantineCssVariables/virtual-color/virtual-color.mjs:15:109)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:25:77)
    at (rsc)/./src/app/layout.tsx (/Users/joan/projects/test/.next/server/app/page.js:150:1)
    at Function.__webpack_require__ (/Users/joan/projects/test/.next/server/webpack-runtime.js:33:42)
    at async e7 (/Users/joan/projects/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396648)
    at async tb (/Users/joan/projects/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400012)
    at async tS (/Users/joan/projects/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400605)
    at async tR (/Users/joan/projects/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /Users/joan/projects/test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1400487617'
}

I'm using NextJS 14.2.18 (app router), and mantine 7.14.3. To reproduce:

1. npx create-next-app@14 test --ts --eslint --app --no-tailwind --src-dir --no-import-alias
2. cd test
3. npm install @mantine/core @mantine/hooks
4. npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars
5. Create postcss.config.cjs as described in https://mantine.dev/guides/next/#postcss-setup
6. Setup layout.tsx following instructions in https://mantine.dev/guides/next/#setup-with-app-router

Add the following to layout.tsx and use theme in as explained in https://mantine.dev/theming/colors/#virtual-colors:

const theme = createTheme({
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'pink',
      light: 'cyan',
    }),
  },
});

Any idea what could be wrong?

Thanks

[rtivital]

Add 'use client'; to the top of the file

[jafargas]

Thanks!