vite: Popper.js:9 Uncaught TypeError: styled_default is not a function

Describe the bug

Popper.js:9 Uncaught TypeError: styled_default is not a function repo https://github.com/mayankpandav/demo_mui_vite

Reproduction

System Info

clone repo try on new upgraded os e.g,ubuntu, windows,mac

same discussion available at mui repo
https://github.com/mui/material-ui/issues/32727

Used Package Manager

yarn

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 29 (7 by maintainers)

Most upvoted comments

@mayankpandav I checked that issue but didn’t find a reproduction which will actually reproduce the error. Would you create a reproduction or point out which one reproduces it?

should I send my laptop to you to reproduce ? can you read the conversation again for the same its happening randomly while merging code or cloning repo for rare user I had same issue while upgrading my laptop and also I have tried multiple OS as a fresh version with virtual box its leading same error its upon you how you can reproduce can you create a VM machine and check with a newer OS. like ubuntu, Mac, Window I already mentioned same thing if you have read whole conversation carefully

mayankpandav on May 25, 2022

For me the issue was the vite file system cache https://vitejs.dev/guide/dep-pre-bundling.html#file-system-cache

running with a --force got past the error, I assume it was pre caching from a previous branch which omitted the styled functionality

Hope this helps

**EDIT actually this only seems to remove issue when switching between branches but didnt fix the overall issue

***EDIT replacing my individual imports import Timeline from '@mui/lab/Timeline'; import TimelineItem from '@mui/lab/TimelineItem'; import TimelineSeparator from '@mui/lab/TimelineSeparator'; with import { Timeline, TimelineItem, TimelineSeparator, } from '@mui/lab';

Has fixed it for me

JoelBrenstrum on Jun 3, 2022

@mayankpandav It would be good for people coming here from google to have more info. Like exact versions you are using. Latest doesn’t really says much after few months

Don’t forget to mention which browser you used. Output from npx @mui/envinfo goes here.

System: OS: macOS 11.6.2 Binaries: Node: 14.17.0 - /usr/local/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 6.14.13 - /usr/local/bin/npm Browsers: Chrome: 101.0.4951.64 Edge: Not Found Firefox: Not Found Safari: 14.1.2 npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.80 @mui/icons-material: ^5.6.2 => 5.6.2 @mui/lab: ^5.0.0-alpha.81 => 5.0.0-alpha.81 @mui/material: ^5.8.0 => 5.8.0 @mui/private-classnames: 5.7.0 @mui/private-theming: 5.7.0 @mui/styled-engine: 5.7.0 @mui/styles: ^5.7.0 => 5.7.0 @mui/system: 5.7.0 @mui/types: 7.1.3 @mui/utils: 5.7.0 @mui/x-data-grid: ^5.9.0 => 5.10.0 @mui/x-date-pickers: 5.0.0-alpha.0 @types/react: 18.0.9 react: ^17.0.0 => 17.0.2 react-dom: ^17.0.0 => 17.0.2

mayankpandav on Jun 9, 2022

@mayankpandav ok, what about what is your react version, mui versio etc?

latest version

mayankpandav on Jun 9, 2022

relating to @JoelBrenstrum solution If I switch

FROM:

import VolumeDown from "@mui/icons-material/VolumeDown";
import VolumeUp from "@mui/icons-material/VolumeUp";

import { VolumeDown } from "@mui/icons-material";
import { VolumeUp } from "@mui/icons-material";

It works.

NOTE: using import { VolumeDown, VolumeUp } from "@mui/icons-material";

doesn’t work.

Remix: 1.5.1 React: 17.0.2

tombohub on Jun 4, 2022

Hi, I’m facing this issue Popper.js:9 Uncaught TypeError: styled_default is not a function in a private repo (I can’t share the code for this repo); but, I believe this issue is related (my assumption since both are related to style/theme with _default): https://stackblitz.com/edit/github-xeswit

Possibly related:

https://github.com/mui/material-ui/issues/31835

infinia-yzl on May 25, 2022

I’d much appreciate if there’s a repro so that others can check out as well. I understand that it may be an edge case that’s specific to your machine, but I won’t be able to sync up and debug the issue for now. I’ll make a comment at the other issue as others had this issue too and try to see if they can provide a repro as well.

bluwy on May 25, 2022