[material-ui] MenuItem component crashes on dividerClasses when migrating to v5

[iamkobold]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Any component that renders a <MenuItem> in the tree be it static or dynamic like a <Select>
2. Render the application in a browser
3. React app crashes

Current behavior 😯

This is a super weird behavior and unfortunately I can't seem to reproduce except on these internal systems. I have exhausted what could be the difference from the working versions I have of it and the one that doesn't work. This feels like something obvious that I just can't see even with all the debugging and testing I have done to try and figure it out.

Even using the example of https://mui.com/material-ui/react-table/#data-table where the drop-down for rows per page is clicked once the MenuItem is attempted to be rendered the error rears it's ugly head.

I would also add that whether the code is in a ThemeProvider or not the bug persists so I feel like it might be something witt WebPack (5) or something else with that process i am not seeing.

Here is a stack-trace of the error when rendering any menu item which points to this line in source which implies that dividerClasses is undefined and I cannot for the life of me figure out why. I have tried an exhaustive number of things to try and get this error fixed but nothing seems to work.

  [`& + .${_Divider.dividerClasses.root}`]: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1)
  },

Actual stack-trace from chrome.

MenuItem.js:105 Uncaught TypeError: Cannot read properties of undefined (reading 'root')
    at eval (MenuItem.js:105:36)
    at muiStyledFunctionResolver (createStyled.js:112:26)
    at transformedStyleArg (createStyled.js:243:40)
    at handleInterpolation (emotion-serialize.browser.esm.js:146:24)
    at serializeStyles (emotion-serialize.browser.esm.js:271:15)
    at eval (emotion-styled-base.browser.esm.js:135:91)
    at eval (emotion-element-c39617d8.browser.esm.js:61:12)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19221:20)
    at beginWork (react-dom.development.js:21631:16)
eval @ MenuItem.js:105
muiStyledFunctionResolver @ createStyled.js:112
transformedStyleArg @ createStyled.js:243
handleInterpolation @ emotion-serialize.browser.esm.js:146
serializeStyles @ emotion-serialize.browser.esm.js:271
eval @ emotion-styled-base.browser.esm.js:135
eval @ emotion-element-c39617d8.browser.esm.js:61
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19221
beginWork @ react-dom.development.js:21631
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27446
performUnitOfWork @ react-dom.development.js:26552
workLoopSync @ react-dom.development.js:26461
renderRootSync @ react-dom.development.js:26429
performConcurrentWorkOnRoot @ react-dom.development.js:25733
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
MenuItem.js:105 Uncaught TypeError: Cannot read properties of undefined (reading 'root')
    at eval (MenuItem.js:105:36)
    at muiStyledFunctionResolver (createStyled.js:112:26)
    at transformedStyleArg (createStyled.js:243:40)
    at handleInterpolation (emotion-serialize.browser.esm.js:146:24)
    at serializeStyles (emotion-serialize.browser.esm.js:271:15)
    at eval (emotion-styled-base.browser.esm.js:135:91)
    at eval (emotion-element-c39617d8.browser.esm.js:61:12)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19221:20)
    at beginWork (react-dom.development.js:21631:16)
eval @ MenuItem.js:105
muiStyledFunctionResolver @ createStyled.js:112
transformedStyleArg @ createStyled.js:243
handleInterpolation @ emotion-serialize.browser.esm.js:146
serializeStyles @ emotion-serialize.browser.esm.js:271
eval @ emotion-styled-base.browser.esm.js:135
eval @ emotion-element-c39617d8.browser.esm.js:61
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19221
beginWork @ react-dom.development.js:21631
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27446
performUnitOfWork @ react-dom.development.js:26552
workLoopSync @ react-dom.development.js:26461
renderRootSync @ react-dom.development.js:26429
recoverFromConcurrentError @ react-dom.development.js:25845
performConcurrentWorkOnRoot @ react-dom.development.js:25745
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <MuiMenuItemRoot> component:

Expected behavior 🤔

Just expect it not to crash the entire app and render as expected.

Context 🔦

Been in the process of upgrading from Material UI v4 to v5 and this is the only component that doesn't work. It doesn't feel like a bug in Material UI but I guess it could be? I just feel like i am missing something from the upgrade process and just cannot see it

Your environment 🌎

npx @mui/envinfo

  Chrome and Edge yield the same result; can't test on firefox cause it's not installed
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 21.2.0 - C:\my-project\node_modules\.bin\node.CMD
    Yarn: Not Found
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.3636.0)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.26
    @mui/core-downloads-tracker:  5.14.20
    @mui/envinfo: ^2.0.14 => 2.0.14
    @mui/icons-material: ^5.14.18 => 5.14.19
    @mui/material: ^5.14.18 => 5.14.20
    @mui/private-theming:  5.14.20
    @mui/styled-engine:  5.14.20
    @mui/styles: ^5.14.18 => 5.14.20
    @mui/system:  5.14.20
    @mui/types:  7.2.10
    @mui/utils:  5.14.20
    @mui/x-date-pickers: ^6.18.3 => 6.18.3
    @types/react: ^18.2.42 => 18.2.42
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    styled-components: ^6.1.1 => 6.1.1

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

I know you mentioned that it's hard to reproduce, but we really can't do anything without reproduction.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.