Skip to content

Nextjs 16 App Router node builtins error when using Pigment CSS in page.tsx #418

@lpicchi

Description

@lpicchi

Steps to reproduce

  • Create nextjs monorepo using turborepo.
  • Create a package named db following prisma instructions
  • Use Pigment CSS in a page.tsx files alongside import from db package
import { getData } from "@redacted/db/data";

export default async function DataPage() {

  const { data, total } = await getData ();

  return (
    // This div uses PigmentCSS sx prop capability
    <div sx={{ display: "block" }}>
        // render data here
    </div>
  );
}

Current behavior

Get error on compilation

⨯ unhandledRejection:  Error: Unable to import "node:path". Importing Node builtins is not supported in the sandbox. in C:\Project\node_modules\@prisma\client\runtime\client.js

Expected behavior

Not to fail or be mentioned in docs if this is not solvable. Mention in docs would be very usefull I dug a lot of code inside webpack, pigment css nextjs plugin and wyw-in-js transform lib to understand what was happening. Almost dropped Pigment CSS from the project because of this.

Context

Workaround: Use a wrapper for your Page and pass data via props

import { getData } from "@redacted/db/data";
import PageWrapper from "./PageWrapper";

export default async function DataPage() {

  const { data, total } = await getData ();

  return (
    // Using PageWrapper to render so no more Pigment CSS usage here
    <PageWrapper data={data} total={total}/>
  );
}

Your environment

npx @mui/envinfo
System:
    OS: Windows 11 10.0.26200
  Binaries:
    Node: 24.12.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.6.2 - C:\nvm4w\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 144.0.7559.134
    Edge: Chromium (143.0.3650.75)
    Firefox: 147.0.3 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.1 
    @mui/core-downloads-tracker:  7.3.7 
    @mui/icons-material:  7.3.7 
    @mui/material:  7.3.7 
    @mui/material-nextjs:  7.3.7 
    @mui/material-pigment-css:  7.3.7 
    @mui/private-theming:  7.3.7 
    @mui/styled-engine:  7.3.7 
    @mui/system:  7.3.7 
    @mui/types:  7.4.11
    @mui/utils:  7.3.7
    @pigment-css/nextjs-plugin:  0.0.30
    @pigment-css/react:  0.0.30
    @pigment-css/unplugin:  0.0.30
    @types/react:  19.2.14
    react:  19.2.3
    react-dom:  19.2.3
    typescript: ^5.9.3 => 5.9.3

Search keywords: nextjs 16 app router page error

Metadata

Metadata

Assignees

Labels

integration: nextjsNext.jsscope: systemThe system, the design tokens / styling foundations used across components. eg. @mui/system with MUIstatus: waiting for maintainerThese issues haven't been looked at yet by a maintainer.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions