Pigment Css not working with Next js basic setup, causing error for 'babelMerge'

[nunesunil]

Steps to reproduce

clone https://github.com/nunesunil/mui-pigmentCss

Current behavior

gives the error -

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object at Object.isAbsolute (node:path:1188:5) at standardizeName (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:76:15) at resolveAlternativesHelper (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:81:28) at resolveAlternativesHelper.next (<anonymous>) at resolveStandardizedNameForRequire (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:159:16) at resolveStandardizedName (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:182:12) at /Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-merge/src/index.js:14:24 at Array.find (<anonymous>) at /Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-merge/src/index.js:13:28 at Array.reduce (<anonymous>) at mergeArray (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-merge/src/index.js:10:36) at babelMerge (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/babel-merge/src/index.js:34:19) at merge (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/options/buildOptions.js:22:42) at Array.reduce (<anonymous>) at buildOptions (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/options/buildOptions.js:33:95) at buildConfigs (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.helpers.js:68:52) at Object.loadAndParse [as loadAndParseFn] (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.helpers.js:128:7) at new Entrypoint (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:40:112) at Entrypoint.innerCreate (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:129:27) at /Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:85:47 at EventEmitter.perf (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:45:20) at Entrypoint.create (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:84:25) at Entrypoint.createRoot (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:62:32) at Object.transform (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/transform/lib/transform.js:98:45) at Object.transform (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@pigment-css/unplugin/build/index.js:268:40) at Object.transform (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]/node_modules/unplugin/dist/webpack/loaders/transform.js:120:38) at LOADER_EXECUTION (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4134) at runSyncOrAsync (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4145) at iterateNormalLoaders (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782) at iterateNormalLoaders (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5650) at /Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5879 at r.callback (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4039) at Object.transform (/Users/sunil/Desktop/mui-pigmentCss/node_modules/.pnpm/[email protected]/node_modules/unplugin/dist/webpack/loaders/transform.js:135:5)

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.0
  Binaries:
    Node: 20.17.0 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 9.12.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.71
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @mui/material: ^6 => 6.1.2 
    @mui/material-pigment-css: ^6 => 6.1.2 
    @pigment-css/nextjs-plugin: ^0 => 0.0.24 
    @types/react: ^18 => 18.3.11 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript: ^5 => 5.6.2 

Search keywords: dependencies

[kcvdk3101]

Pigment CSS is not working with Vite + React + TypesScript too

[santi-m]

For a quick fix. you can pin @babel/core to 7.25.2 with npm install --save-dev @babel/[email protected]
I think there is something with the new release of babel core
https://github.com/babel/babel/releases/tag/v7.25.7

[mnajdova]

Correct, it's related to the latest @babel/core release, we have a similar issue here: mui/material-ui#43971 (comment). Please pin @babel/core, until we find a fix for it.