Popper styled_default is not a function Mui 5.6.0 [material-ui]

Question

After upgrading from @mui/material 5.5.0 to 5.6.4 my vite react-ts app doesn't run, throwing an error: styled_default is not a function by Popper.js, the popper component is being used by an autocomplete component

The theme provider is wrapping entire app

Autocomplete is hitting an api to populate options, but a fresh vite project with mui doesn't seem to have this issue?

Any help / pointers in the right direction would be appreciated

running react 17.0.2 vite 2.8.0 mui/material 5.6.4

Answer 1

I also had a similar issue. The problem came from calling the MUI Autocomplete component on my React Vite app. I didn't know why the MUI Autocomplete component could trigger the TypeError: styled_default is not a function from the Popper.js file.

I have solved the problem using the combination by combining some answers from MUI Github on the vite.config.js file here:

optimizeDeps: {
  include: [
    '@emotion/react', 
    '@emotion/styled', 
    '@mui/material/Tooltip'
  ],
},
plugins: [
  react({
    jsxImportSource: '@emotion/react',
    babel: {
      plugins: ['@emotion/babel-plugin'],
    },
  }),
],