[material-pigment-css] Grid throws an error when it is RSC

[kevinpfox]

Steps to reproduce

Link to live example: https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts?file=README.md

This is the same StackBlitz example provided here: https://github.com/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts

Steps:

1. Attempt to use https://github.com/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts
2. See it hit the following error when running sample files locally... ⨯ Error: Cannot access default.muiName on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. at stringify () at stringify () at stringify () at stringify ()

Current behavior

⨯ Error: Cannot access default.muiName on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. at stringify () at stringify () at stringify () at stringify ()

Expected behavior

Render the page

Context

I've tried this on a mac, local environment and get the same result. I added "use client" to top of /src/app/page.tsx to force it to render the page. I assume this should not be necessary.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Out of the box

Hack to make page work

Search keywords: Demo - Material UI Pigment CSS Next.js App Router example in TypeScript

[stunaz]

had this issue, the problem is with the Grid Component by using import Grid from '@mui/material/Grid2'; it will also work

[kevinpfox]

You are onto something. Thank you for replying.

Doing the following swap out in /src/app/page.tsx ...makes it work again.

//import Grid from '@mui/material-pigment-css/Grid';
import Grid from '@mui/material/Grid2';

[siriwatknp]

The root cause is the isGridComponent(child) in the Pigment CSS Grid. The error occurs when the child of a Grid is a client component.

I think the hotfix is to check for container check first and then apply the isGridComponent(child).

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @kevinpfox! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!