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

[mayankpandav]

Describe the bug

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

Reproduction

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.

[sapphi-red]

Your reproduction works without any errors.

[github-actions]

Hello @mayankpandav. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[mayankpandav]

Your reproduction works without any errors.

can you check the same thing on this conversation sometimes it works sometimes it's not, for many users Based on this scenario I'm not able to reproduce that's the problem sometimes it will work on your system sometimes it will not as specially it will work on every live IDE we have to check on localsystem
mui/material-ui#32727

[sapphi-red]

@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?

[mayankpandav]

@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

[bluwy]

Tested on macos and it's working for me too. And also the repro should remove using plugin-react-refresh as that's deprecated. (It's already using plugin-react).

As mentioned, please provide a repro that reproduces the issue, ideally from stackblitz if that helps. There are already a few maintainers that failed to reproduce it, and the conversation doesn't help.

[mayankpandav]

Tested on macos and it's working for me too. And also the repro should remove using plugin-react-refresh as that's deprecated. (It's already using plugin-react).

As mentioned, please provide a repro that reproduces the issue, ideally from stackblitz if that helps. There are already a few maintainers that failed to reproduce it, and the conversation doesn't help.

hello @bluwy I'm saying online IDE will work I have tested on all the live IDE like stackblitz , codesandbox
and I'm not able to reproduce its dependency of system os ...so I don't think I can help you with reproduction can you give me time that we can connect and work on my system if its help for you?

[bluwy]

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.

[mayankpandav]

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 repo is there did you check ?

Describe the bug

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

[bluwy]

yes and i don't see any errors with it

[mayankpandav]

yes and i don't see any errors with it

then its hard for me but usually I have tried mac os, windows and ubuntu with virtual machine and every time I had same issue

[infinia-yzl]

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:

• Issues with esbuild mui/material-ui#31835

[tombohub]

@mayankpandav Did you try to use MUI without icons? I have similar error only if using icons: mui/material-ui#32891

[mayankpandav]

@mayankpandav Did you try to use MUI without icons? I have similar error only if using icons: mui/material-ui#32891

yes I have tried but no luck for me

[tombohub]

@mayankpandav are you using React 18?
Cause I have just tried with React 17 and it's working

[mayankpandav]

@mayankpandav are you using React 18? Cause I have just tried with React 17 and it's working

I have tried with the latest and also tried with 16,17 but no luck

[mayankpandav]

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:

• Issues with esbuild mui/material-ui#31835

@bluwy can you check reproduction of similar error|?

[sapphi-red]

Would you provide the minimal reproduction of that?

[mayankpandav]

Tested on macos and it's working for me too. And also the repro should remove using plugin-react-refresh as that's deprecated. (It's already using plugin-react).

As mentioned, please provide a repro that reproduces the issue, ideally from stackblitz if that helps. There are already a few maintainers that failed to reproduce it, and the conversation doesn't help.

as per comment its stackblitz

[sapphi-red]

That is a reproduction and it does help. Minimal reproducible example would help more.

[infinia-yzl]

I couldn't create a minimal reproducible example yet, sorry.

However, removing some icons from the AppBar seems to make the error go away. Perhaps the error I encountered is related to what @tombohub pointed out?

https://stackblitz.com/edit/github-xeswit-svpxve?file=src/_component/AppBar.tsx

[JoelBrenstrum]

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

[tombohub]

relating to @JoelBrenstrum solution If I switch

FROM:

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

TO

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

[infinia-yzl]

Just tried it. It seems to "fix" it.

From

import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone';
import ContactlessIcon from '@mui/icons-material/Contactless';

To

import { HomeTwoTone as HomeTwoToneIcon } from '@mui/icons-material';
import { Contactless as ContactlessIcon } from '@mui/icons-material';

I had to remove/reinstall an npm package afterwards for the error to go away though.

[mayankpandav]

Just tried it. It seems to "fix" it.

From

import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone';
import ContactlessIcon from '@mui/icons-material/Contactless';

To

import { HomeTwoTone as HomeTwoToneIcon } from '@mui/icons-material';
import { Contactless as ContactlessIcon } from '@mui/icons-material';

I had to remove/reinstall an npm package afterwards for the error to go away though.

not working for me

[tombohub]

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

[mayankpandav]

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

latest version

[tombohub]

@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

[mayankpandav]

@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