Huge increase in memory usage in v7 when building with Next.js + Pigment CSS

[Pikachews]

Steps to reproduce

Steps:

1. Clone the material-ui-pigment-css-nextjs-ts example
2. npm install && rm -rd .next && npm run build --experimental-debug-memory-usage
3. Observe peak memory usage of around 2 GB.
4. Downgrade @mui/material to ^6
5. npm install && rm -rd .next && npm run build --experimental-debug-memory-usage
6. Observe peak memory usage of around 1 GB.

Current behavior

Memory usage has increased a lot (doubled) when upgrading to Material UI v7 and building the project, even on a barebones example project, consuming ~2 GB of memory.

Expected behavior

Memory usage during build time should not be significantly increased with the upgrade to Material UI v7.

Context

Trying to use Material UI + Next.js + Pigment CSS without having to increase Node.js --max-old-space-size in Github Actions. 🙁

Your environment

npx @mui/envinfo

$ npx @mui/envinfo

  System:
    OS: macOS 14.7.2
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.14.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 134.0.6998.166
    Edge: 134.0.3124.95
    Safari: 18.2
  npmPackages:
    @mui/material: latest => 7.0.1
    @mui/material-pigment-css: latest => 7.0.1
    @pigment-css/nextjs-plugin: latest => 0.0.30
    @pigment-css/react: latest => 0.0.30
    @types/react: latest => 19.1.0
    react: latest => 19.1.0
    react-dom: latest => 19.1.0
    typescript: latest => 5.8.2

Search keywords: pigment out of memory heap nextjs build

[Pikachews]

On a separate, but related note, is memory usage during build expected to be that high, even on v6 (1 GB)? Is this just the nature of using Pigment CSS? When testing on the material-ui-nextjs-ts example, memory usage only peaked at ~150 MB, even on MUI v7. 😭

[brijeshb42]

Took a look and found that for v6, the peak heap usage on my system was 651 mb vs 1.8gb for v7. I'll need to debug more. The only major change in v7 is esm exports and that might have something to do with this.

[brijeshb42]

On a separate, but related note, is memory usage during build expected to be that high

I won't comment on the supposed peak memory usage but due to the nature of how Pigment CSS works, all the css is generated ahead of time and all the modules are evaluated during build time itself as opposed to usage without Pigment CSS where the modules will be evaluated during runtime (server or browser).
This leads to a higher memory usage.