material-ui: MUI v5.11.8 release breaks build of NextJS v13.1.6

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Screenshot: Screenshot 2023-02-07 at 16 41 21

Steps:

Upgrade to any of the MUI packages from above screenshot, with a latest nextJS install, that has routes in the pages folder.
Run a next build.
Expect the following error:

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.2
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: Not Found
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Edge: Not Found
    Firefox: 107.0
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base: ^5.0.0-alpha.116 => 5.0.0-alpha.116 
    @mui/core-downloads-tracker:  5.11.8 
    @mui/icons-material: ^5.11.0 => 5.11.0 
    @mui/lab: ^5.0.0-alpha.118 => 5.0.0-alpha.118 
    @mui/material: ^5.11.8 => 5.11.8 
    @mui/private-theming:  5.11.7 
    @mui/styled-engine:  5.11.8 
    @mui/system: ^5.11.7 => 5.11.8 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.7 
    @types/react: ^18.0.27 => 18.0.27 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 17 (5 by maintainers)

Most upvoted comments

Were you able to find a workaround for now @benjaminatfrw , @LouisTrezzini? I tried several different NextJS and MUI versions, sadly with the same outcome.

our workaround is to tell our package manager to install the previous version of @mui/styled-engine:

"pnpm": {
    "overrides": {
      "@mui/styled-engine": "5.11.0",
    },
}

LouisTrezzini on Feb 8, 2023

The only recent change in the StyledEngineProvider that I remember is #36001. Didn’t have time to look further, but I will check on Monday if it is related.

Yeah, I think it could be related as the problematic line in @emotion/styled/base is the following:

className = utils.getRegisteredStyles(cache.registered, classInterpolations, props.className);

which based on the above mentioned could indeed have cache-undefined when trying to access the registered-property when the page is being rendered in SSR mode as then document will be undefined

weyert on Feb 10, 2023

Removing the StyledEngineProvider removes the error

TypeError: Cannot read properties of undefined (reading 'registered')

zhukosvinka on Feb 8, 2023

on our side, the build fails with NextJS 12.3.4 and this stacktrace:

TypeError: Cannot read properties of undefined (reading 'registered')
    at /REDACTED/node_modules/.pnpm/@emotion+styled@11.10.5_csjd3nthallvoinafcukdmosde/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.prod.js:131:53
    at /REDACTED/node_modules/.pnpm/@emotion+react@11.10.5_2exiyaescjxorpwwmy4ejghgte/node_modules/@emotion/react/dist/emotion-element-20108edd.cjs.prod.js:62:16
    at Wc (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:73:476)
    at Z (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/REDACTED/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)

LouisTrezzini on Feb 7, 2023