[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