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
Steps to reproduce
dbfollowing prisma instructionspage.tsxfiles alongside import fromdbpackageCurrent behavior
Get error on compilation
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
Your environment
npx @mui/envinfoSearch keywords: nextjs 16 app router page error