Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Nefcanto opened this issue Mar 15, 2023 · 6 comments
Closed

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

Nefcanto opened this issue Mar 15, 2023 · 6 comments
Assignees
@michaldudak
Labels
component: Popper The React component. See <Popup> for the latest version. external dependency Blocked by external dependency, we can’t do anything about it

Comments

@Nefcanto
Copy link

Nefcanto commented Mar 15, 2023 •
edited by oliviertassinari
Loading

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)
@Nefcanto Nefcanto added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 15, 2023
@Nefcanto Nefcanto mentioned this issue Mar 15, 2023
Open
7 tasks
@zannager zannager added the component: Popper The React component. See <Popup> for the latest version. label Mar 15, 2023
@HeartLF
Copy link

HeartLF commented Mar 16, 2023

I have this question too, when use vite

@michaldudak
Copy link
Member

michaldudak commented Mar 16, 2023 •
edited
Loading

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.

@michaldudak michaldudak added external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 16, 2023
@Nefcanto
Copy link
Author

@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).

@Janpot Janpot mentioned this issue Aug 14, 2023
Closed
2 tasks
@Janpot Janpot mentioned this issue Aug 29, 2023
Closed
@Methuselah96 Methuselah96 mentioned this issue Aug 30, 2023
Open
@samiurprapon
Copy link 

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
Copy link
Member

Janpot commented Sep 17, 2024

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.

@Janpot Janpot closed this as completed Sep 17, 2024
@github-actions GitHub Actions
Copy link

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!

@Janpot Janpot mentioned this issue Sep 10, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@michaldudak michaldudak

Labels
component: Popper The React component. See <Popup> for the latest version. external dependency Blocked by external dependency, we can’t do anything about it
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@Janpot @michaldudak @Nefcanto @samiurprapon @HeartLF @zannager