-
-
Notifications
You must be signed in to change notification settings - Fork 56
Open
Labels
integration: nextjsNext.jsNext.jsscope: systemThe system, the design tokens / styling foundations used across components. eg. @mui/system with MUIThe 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.These issues haven't been looked at yet by a maintainer.
Description
Steps to reproduce
- Create nextjs monorepo using turborepo.
- Create a package named
dbfollowing prisma instructions - Use Pigment CSS in a
page.tsxfiles alongside import fromdbpackage
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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
integration: nextjsNext.jsNext.jsscope: systemThe system, the design tokens / styling foundations used across components. eg. @mui/system with MUIThe 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.These issues haven't been looked at yet by a maintainer.