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

[Nefcanto]

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/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.