nextjs build - very high heap usage - Peak heap usage: 1806.94 MB

[schtiewen]

Steps to reproduce

hi,
i've a nextjs 15.1.0 app and i'm using the withPigment function.

const pigmentConfig: PigmentOptions = {
    transformLibraries: ['@mui/material'],
    theme
};

export default withNextIntl(withPigment(nextConfig, pigmentConfig));

Current behavior

the problem is, that by the build, the process needs round about 2GB.
for testing purpose, i've removed the "transformLibraries: ['@mui/material']" and the output was round about 600MB.

Expected behavior

the build process should not take up too much memory

Context

No response

Your environment

  System:
    OS: macOS 14.7.1
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.109
    Edge: Not Found
    Safari: 18.1
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/core-downloads-tracker:  6.2.0 
    @mui/material: ^6.2.0 => 6.2.0 
    @mui/material-nextjs: ^6.2.0 => 6.2.0 
    @mui/material-pigment-css: ^6.2.0 => 6.2.0 
    @mui/private-theming:  6.2.0 
    @mui/styled-engine:  6.2.0 
    @mui/system:  6.2.0 
    @mui/types:  7.2.19 
    @mui/utils:  6.2.0 
    @pigment-css/nextjs-plugin: ^0.0.28 => 0.0.28 
    @pigment-css/react:  0.0.28 
    @pigment-css/unplugin:  0.0.28 
    @types/react: ^18 => 18.3.12 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript: ^5 => 5.6.3 

Search keywords: memory peak heap

[brijeshb42]

Depends on the imports. Although even for that, 2gb is too high. How are you importing ? Is it top-level import, like import {stuff} from '@mui/material' or import stuff form '@mui/material/subpath' ?

[schtiewen]

hi, i have a mix.

i would say: 90% of

import {stuff} from '@mui/material'
like:
import {Button, ButtonProps} from "@mui/material";
import {styled} from "@pigment-css/react";

and 10% of

import Box from "@pigment-css/react/Box";

the flow is:

import {ExternalButton} from "externalButton.tsx"
inside
import {Button, ButtonProps} from "@mui/material";

and so on

is a top level import a bad idea?
thx for your answer

[brijeshb42]

is a top level import a bad idea?

Generally, no. Use whatever the library docs say.

But in the context of Pigment CSS, it'll be slower because at the moment, it uses wyw-in-js which uses module evaluation to generate the css. It has it's own code shaking but it's not the same as what you'd get with webpack/vite etc. So when it's a top-level import, it
is essentially evaluating all the imports in that file as well making it slow and memory intensive.
There's an RFC to make it faster, but it'll take time to release and for us to migrate to it.