mui / mui/material-ui

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

Open
#45,804 3 comments 0 reactions 1 assignee View on GitHub

@brijeshb42 is already working on this.

Since Apr 3, 2025.

nextjs package: material-pigment-css scope: system v7.x
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.