[Masonry] Error: Attempted to call unstable_generateUtilityClasses()

[nocodehummel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://github.com/nordicgit70/nextjs-app

Steps:

1. Next.js template with MUI packages.
2. Copied Masonry SSR sample.
3. Open browser to localhost renders the error.

Current behavior 😯

Masonry component renders an error message as React-server-component in Nextjs 14.0.2 App.

Error: Attempted to call unstable_generateUtilityClasses() from the server but unstable_generateUtilityClasses is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

Expected behavior 🤔

Expected to render sample Masonry.

Context 🔦

The error is (re-)produced in Next.js template App.

Your environment 🌎

npx @mui/envinfo

System:
    OS: Windows 11 10.0.22621
    Browser: Firefox
  Binaries:
    Node: 18.18.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (119.0.2151.72)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/core-downloads-tracker:  5.14.18
    @mui/lab: ^5.0.0-alpha.153 => 5.0.0-alpha.153
    @mui/material: ^5.14.18 => 5.14.18
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/system:  5.14.18
    @mui/types:  7.2.9
    @mui/utils:  5.14.18
    @types/react: 18.2.18 => 18.2.18
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0```
</details>

[mj12albert]

@nordicgit70 We haven't added 'use client' to lab components, to get Masonry to work you would need to wrap it in a client component first

[nocodehummel]

Your documentation has a sample Masonry for SSR. SSR means without use client.

[nocodehummel]

@mj12albert linked #32688 which indicates that SSR is working with following dependencies.

"dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/lab": "^5.0.0-alpha.80",
    "@mui/material": "^5.6.4",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },```

[mj12albert]

SSR means without use client.

@nordicgit70 This is actually incorrect and a common misunderstanding of RSCs - Client Components can still be rendered to static HTML on the server (SSR), see this explanation by the React team/working group for more details: reactwg/server-components#4

[nocodehummel]

Thanks for the explanation.