Popper.js:11 Uncaught TypeError: styled_default is not a function at Popper.js:11:20

[Nefcanto]

Steps to reproduce 🕹

Link to live example: https://github.com/Nefcanto/MuiPopperBug

Steps:

1. git clone https://github.com/Nefcanto/MuiPopperBug
2. cd MuiPopperBug
3. npm install
4. npm run dev
5. Browse and see the error

Current behavior 😯

Popper complains about styled_default and does not give us more information to debug this. All I see in my console is:

Popper.js:11 Uncaught TypeError: styled_default is not a function
    at Popper.js:11:20
(anonymous) @ Popper.js:11

And I see nothing in my terminal. I have no clue. None.

Expected behavior 🤔

When an error occurs, you should give us more data, at least a call stack that contains something related to our code.

What component of mine has caused this issue? What should I do to debug this?

In a real-world application with hundreds or sometimes thousands of components, it's impossible to go for trial and error.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: Linux 5.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye) Binaries: Node: 18.15.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.6.1 - /usr/local/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: ^11.10.6 => 11.10.6 @emotion/styled: ^11.10.6 => 11.10.6 @mui/base: 5.0.0-alpha.121 @mui/core-downloads-tracker: 5.11.13 @mui/icons-material: ^5.11.11 => 5.11.11 @mui/lab: ^5.0.0-alpha.101 => 5.0.0-alpha.123 @mui/material: ^5.11.13 => 5.11.13 @mui/private-theming: 5.11.13 @mui/styled-engine: 5.11.11 @mui/system: 5.11.13 @mui/types: 7.2.3 @mui/utils: 5.11.13 @mui/x-date-pickers: ^6.0.1 => 6.0.1 @types/react: ^18.0.27 => 18.0.28 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 ```

I'm inside a docker container. My local browser is:

Chrome 111.0.5563.64 (Official Build) (64-bit) 

[HeartLF]

I have this question too, when use vite

[michaldudak]

The Popper runs well and does not complain about styled not being a function when bundled with Webpack - this leads me to believe it's a problem on Vite's side, in their bundling logic, not in your project. I suggest opening an issue in their repo with a minimal reproducible example (the one you created contains a lot of code unrelated to the issue). Having a small repro can really help pinpoint the actual bug.

If it turns out to be a bug in our build, I'm happy to work on a fix, but I'm not familiar with Vite's bundler enough to figure it out.

[Nefcanto]

@michaldudak the point is we tried to create a minimal reproducible example. But it does not happen there. It even happens in our code intermittently. Sometimes it works. That's what made us submit our real code and strip away login and API calls only.\

Fortunately, the Vite team has already found the source of the bug using the same example repo.

They have confirmed that it's a Vite bug, but I think you might also be able to add extra documentation to your docs. Because I've seen a lot of MUI developers suffer from this bug (related to Popper or Card or Box or many other components).

[samiurprapon]

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: [
      '@mui/icons-material',
      '@mui/material',
      '@emotion/react',
      '@emotion/styled',
    ],
  },
});

Answer worked for me.

[Janpot]

Even though it may not necessarily look like it, we have reason to believe that the root cause of this issue actually lies in @mui/icons-material and has now been resolved. This fix is available in version 6.1.0 and up. As such we are closing this and a few similar issues.

If you still run into issues after upgrading to >6.1.0, please open a new ticket, this will allow us to separate whatever problem is left from the rest of this ticket. Thank you for your patience.

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @Nefcanto! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!