Very long compilation time with next-js

[aleksei-berezkin]

Steps to reproduce

1. Take very simple project, e.g. https://github.com/aleksei-berezkin/mui-pigment-example/
2. npm run dev
3. Open localhost:3000

Current behavior

Compilation takes around 7–8 seconds:

 ✓ Starting...
 ✓ Ready in 1614ms
 ○ Compiling / ...
 ✓ Compiled / in 7.7s (1221 modules)

Expected behavior

Compilation should take 1–2 seconds

Context

No response

Your environment

System:
  OS: macOS 14.0
Binaries:
  Node: 20.14.0 - /opt/homebrew/opt/node@20/bin/node
  npm: 10.7.0 - /opt/homebrew/opt/node@20/bin/npm
  pnpm: 9.11.0 - /opt/homebrew/opt/node@20/bin/pnpm
Browsers:
  Chrome: 130.0.6723.117
  Edge: Not Found
  Safari: 17.0
npmPackages:
  @emotion/react: ^11.13.3 => 11.13.3 
  @emotion/styled: ^11.13.0 => 11.13.0 
  @mui/core-downloads-tracker:  6.1.6 
  @mui/material: ^6.1.6 => 6.1.6 
  @mui/material-pigment-css: ^6.1.6 => 6.1.6 
  @mui/private-theming:  6.1.6 
  @mui/styled-engine:  6.1.6 
  @mui/system:  6.1.6 
  @mui/types:  7.2.19 
  @mui/utils:  6.1.6 
  @pigment-css/nextjs-plugin: ^0.0.26 => 0.0.26 
  @pigment-css/react:  0.0.25 
  @pigment-css/unplugin:  0.0.26 
  @types/react: ^18.3.1 => 18.3.12 
  react: ^18.3.1 => 18.3.1 
  react-dom: ^18.3.1 => 18.3.1 
  typescript: ^5.6.3 => 5.6.3 

Search keywords: compilation, next-js

[paulm17]

Try using the latest node v22. I noticed a little speed boost. This is a known issue with wyw-in-js that pigment currently uses. There won't be a significant boost until they switch to react compiler.

[aleksei-berezkin]

@paulm17 thx for your answer. Unfortunately switching to node22 doesn't help. So, waiting for wyw-in-js to upgrade.

[tejasatolao]

same here

[fredleroy]

same here

[laphim123]

same here

[Jedidiahip]

same here 😭

[paulm17]

I know there was talk of using React Compiler to speed things up. Since the wjw-in-js is already being used. Will the team be using? Anber/wyw-in-js#114

[brijeshb42]

Yes. That would be the case even if we have to write transforms in Rust.