Uncaught TypeError: styled_default is not a function

[Nefcanto]

Summary 💡

I updated my package.json and sometimes I get this error and it's not going away. But sometimes I don't get it.

The problem is two-folded:

• It's intermittent (sometimes appears and sometimes goes away automatically)
• It does not tell us more information (what code of mine has caused it?)

Examples 🌈

No response

Motivation 🔦

Please add more info to it. Please let us know what have we done wrong to get this error.

I have tried things proposed on StackOverflow and #32727 but none worked for me.

Please give us more info. That's the feature I'm requesting. Thank you.

[hbjORbj]

I updated my package.json and sometimes I get this error and it's not going away. But sometimes I don't get it.

We need more information in order to understand your issue. Can you provide some kind of reproduction? Also, please tell us what you updated in package.json and its previous version and updated version.

[Nefcanto]

@hbjORbj that's exactly the problem. I can't reproduce an example, because I don't know what is wrong. Because all I see is this in my console:

What can I provide with this single line?

However, this is my update in the package.json:

As you can see the only major change is @mui/x-date-pickers I followed the upgrade guide from 5 to 6 and I don't see any error related to the date components.

In fact, when this error does not happen, I can use all of the date-time components and they work just fine.

My problem is that I have no clue why this happens. And why it happens only sometimes. I have no idea how to debug it.

[TurtIeSocks]

I'm seeing this as well, but with the Grid2 component:

    "@emotion/react": "11.10.6",
    "@emotion/styled": "11.10.6",
    "@mui/icons-material": "5.11.11",
    "@mui/material": "5.11.13",

    "@vitejs/plugin-react": "3.1.0",
    "vite": "4.1.4",
    "vite-plugin-checker": "0.5.6"

[Nefcanto]

@hbjORbj this is a reproducible repo, though it's not minimal.

Please clone, npm install, npm run dev, and browse. You should see the error.

I'm also going to create a bug issue for this. Thank you.

[mnajdova]

It's not clear from the description of the issue, but it is likely related to some version of vite (or the caching algorithm used). I would propose trying #32727 (comment), #32727 (comment) or any other suggestion from that issue. I am not sure how we can help on MUI's side.

[Nefcanto]

@mnajdova thank you for answering. I have provided a reproducible example. I think it's related to MUI, because it happens in the Popper.js file which is part of MUI. At least you can use a try/catch or some prechecking or to provide a more descriptive error. I also added a bug issue.

By the way, I tried everything in that issue. And nothing worked. Removing node_modules and reinstalling did not work. I have already imported ThemeProvider from @mui/material/styles. And other solutions too did not work.

[mnajdova]

I guess then we can consider this duplicate of #31835

[Nefcanto]

@mnajdova Yes, I think it's similar. But please don't close this as that is not answered after almost a year. Please take this error more seriously. If necessary, could you talk to Vite team? Your voice would have a higher impact.

[rene-stesl]

Same issue here, I didn't update my modules or anything. Just used styled() and . The Code worked at first, but suddenly I got an "createTheme_default is not a function at Box.js" Error. After reverting everything back to the latest known working codebase I get the "styled_default is not a function at Popper.js" Error.

[TurtIeSocks]

Update on mine, I'm still not 100% sure what caused it, but after multiple days of troubleshooting, it has started to work again, so here are some things I tried along the way.

• Initially appeared after merging in main to the current branch that I was working on
• The merged commits affected other apps and packages in the monorepo, and removed some non-MUI dependencies, none of which were present in the app that was seeing the styled_default is not a function at... issue.
• Swapping back to main and installing fresh dependencies worked
• Rolling back commits on the branch I was on to pre-merge from main, also worked
• At the time, I was using Vite 4 on this app, while a separate app in the monorepo was using Vite 3 and was not seeing these issues, despite both of them utilizing Grid2
• I tried both apps with Vite 3, the issue still persisted on the troublesome one
• I ensured that all apps and packages were using the same MUI versions.
• Before my first reply here, I was using:

    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.10.3",

• I tried updating to latest across all apps to see if it'd help, but no luck
• Removed all build/node_modules folders multiple times, and cleared yarn cache
• I went through and changed all import Grid2 from '@mui/material/Unstable_Grid2/Grid2' => import Grid2 from '@mui/material/Unstable_Grid2', despite both the working and non-working Vite apps having a mixed combination of them previously
• I changed all of my imports in the offending Vite app from import { Button } from '@mui/material' => import Button from '@mui/material/Button'
• Lastly, I changed import { ThemeProvider } from '@mui/material' => import { ThemeProvider } from '@mui/material/styles' and this miraculously seems to have fixed it. What's odd is that I had tried this earlier in the week, with no results, but after changing the other imports, it seems to have resolved it?
• At this point, both apps are now using Vite 3 and have gone back to Mui 5.10.3, the one that was always working still has imports like this: import { Button } from '@mui/material', including the ThemeProvider component, so it's unclear to me why changing the imports in the offending app has made a difference but at least it's working now.

Hope this helps :)

[Nefcanto]

The Vite team found the bug. It's in the bundling.

[martingalenda]

The Vite team found the bug. It's in the bundling.

But they don't clarify the solution, I've been reading about the issue for 3 hours and there's no solution, Vite is totally buggy

[Nefcanto]

@martingalenda try to reorder your imports. That helped me.

[dimitur2204]

• Lastly, I changed import { ThemeProvider } from '@mui/material' => import { ThemeProvider } from '@mui/material/styles' and this miraculously seems to have fixed it. What's odd is that I had tried this earlier in the week, with no results, but after changing the other imports, it seems to have resolved it?

@TurtleSocks +1

[brahmbeyond]

It gave the same error for Grid2,

At start everything was working fine for Grid v2, even hosted my application, tested many times , until after some time I tried to clean up the code and did some edits with the imports , wrote many of them together like import { Button, Fab } from '@mui/material' and after some days when I revisited the project on my localhost , it gave the error but the hosted application was working fine.
I tried rearranging the imports but nothing worked so I Imported the Grid V1 import Grid from '@mui/material/Grid' and after that the application is working fine in the localhost also.

[AGM-90]

It gave the same error for Grid2,

At start everything was working fine for Grid v2, even hosted my application, tested many times , until after some time I tried to clean up the code and did some edits with the imports , wrote many of them together like import { Button, Fab } from '@mui/material' and after some days when I revisited the project on my localhost , it gave the error but the hosted application was working fine. I tried rearranging the imports but nothing worked so I Imported the Grid V1 import Grid from '@mui/material/Grid' and after that the application is working fine in the localhost also.

/

[AGM-90]

change import statement to import ThemeProvider from "@mui/material/styles/ThemeProvider";

[Junaid300]

Note: It may not be helpful but it was my observation and little debugging
I got this error in storybook. For me it seems like cache issues. Whenever i do hard refresh (ctrl+alt+ R), it work fine. Still it seems like vite is not able to manage the cache for theme provider properly and throw error. When i debugged little bit more, it was because of popper.
For storybook, whenever i delete cache folder it starts working fine
Updated

[wuming123]

I had the same problem, after I used Unstable_Grid2

[micky2be]

Had the issue few hours ago when I started using Unstable_Grid2.
Fixed the issue (for now?) by updating all my dependencies.

For what it's worth here the changes:

dependency	before	after
@mui/material	5.13.6	5.13.7
@mui/lab	5.0.0-alpha.134	5.0.0-alpha.135
@babel/core	7.22.5	7.22.6

It didn't seem necessary but I also change the imports into:

import { Unstable_Grid2 as Grid } from "@mui/material";

[BernhardSmuts]

I am experiencing the issue, I added an accordion, the error started, then removed all the code and the error persisted, making me think it's something in the Vite build that gets left over or something like that.

I tried reordering the imports, nothing worked in that regard.

I just finished deleting and reintalling my node_modules and this also didn't work. Still have not found a workable solution.

This project was running perfectly on Creat-React-App, so only thing I can think to point at is Vite?

------- Edit after a few hours:

I had the issue with Grid2, so I reverted everything back to the first version of Grid, and that made it load again. Will see if it holds stable. Seems the problem stems from Popper and Grid, and has something to do with the way they are imported 🤔

[dannypule]

Problem description

I've been experiencing the styled_default is not a function issue in a Yarn workspaces monorepo. It's because I have two workspaces that both use MUI, one workspace has a Next.js application which imports shared components from another workspace within the repo. We're doing this so that other Next.js workspaces can also use the same component library.

The problem lies in the way Yarn is installing MUI and Emotion packages. For the Next.js application it's installing MUI and Emotion in the workspace's own node_modules folder. But for the shared components workspace, it's MUI and Emotion packages are being installed in the root node_modules folder.

When the Next.js application runs, any MUI hooks or utils that are imported from the workspace's node_modules folder aren't aware of the ThemeProvider context coming from MUI and Emotion in the root node_modules folder.

Potentially hacky solution:

When I removed MUI and Emotion packages from the individual workspace's package.json files and moved them up to the root package.json file, the problem went away. This is because now when the Next.js app runs, the ThemeProvider context is the same for all MUI hooks, utils and components.

It's worth noting that I needed to delete the .next cache in the workspace and re-run the local server to ensure that no cached MUI and Emotion data was being used.

Potential downsides

A downside to this could be that now all the workspaces in the monorepo would have to use the same MUI version. This is probably a requirement in this scenario because if the versions varied then MUI or Emotion would be installed in the workspaces's own node_modules folders which would trigger the same error as before.

Another downside is the potential confusion this may cause to other developers if they are maintaining or upgrading package versions and it's not clear why the packages have been installed in this way.

Another potential solution

An alternative to manually handling the packages in this way is to pnpm instead of yarn. pnmp has a shamefully-hoist config option which forces a package to be hoisted to the root node_modules folder.

Why was Emotion moved to the root package.json too?

When I was debugging this issue, I experimented with manually deleting the @mui folder from the workspace's own node_modules folder so that when the project is served locally it uses the @mui folder found in the root node_modules. When I left the emotion folder in the workspace's node_modules folder the styled_default is not a function issue was still present.

TL;DR

The issue in monorepos could be due to MUI and Emotion packages not being hoisted to the root node_modules folder which could be preventing the ThemeProvider context from being shared between workspaces.

[amiiit]

My context is a React application that I'm migrating from webpack to vite, this is one of the errors that I started seeing.
Following the suggestion from @micky2be above I upgraded mui from 5.9.3 to 5.15.7 and the error went away.

I'm still getting other errors, so I can't say for 100%, but I believe the other errors aren't related to this issue.

Perhaps this is already fixed?

[kikkichen]

Update on mine, I'm still not 100% sure what caused it, but after multiple days of troubleshooting, it has started to work again, so here are some things I tried along the way.

* Initially appeared after merging in `main` to the current branch that I was working on

* The merged commits affected **other** apps and packages in the monorepo, and removed some non-MUI dependencies, none of which were present in the app that was seeing the `styled_default is not a function at...` issue.

* Swapping back to main and installing fresh dependencies worked

* Rolling back commits on the branch I was on to pre-merge from `main`, also worked

* At the time, I was using Vite 4 on this app, while a separate app in the monorepo was using Vite 3 and was not seeing these issues, despite both of them utilizing Grid2

* I tried both apps with Vite 3, the issue still persisted on the troublesome one

* I ensured that all apps and packages were using the same MUI versions.

* Before my first reply here, I was using:

    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.10.3",

* I tried updating to latest across all apps to see if it'd help, but no luck

* Removed all build/node_modules folders multiple times, and cleared yarn cache

* I went through and changed all `import Grid2 from '@mui/material/Unstable_Grid2/Grid2'` => `import Grid2 from '@mui/material/Unstable_Grid2'`, despite both the working and non-working Vite apps having a mixed combination of them previously

* I changed all of my imports in the offending Vite app from `import { Button } from '@mui/material'` => `import Button from '@mui/material/Button'`

* Lastly, I changed `import { ThemeProvider } from '@mui/material'` => `import { ThemeProvider } from '@mui/material/styles'` and this miraculously seems to have fixed it. What's odd is that I had tried this earlier in the week, with no results, but after changing the other imports, it seems to have resolved it?

* At this point, both apps are now using Vite 3 and have gone back to Mui `5.10.3`, the one that was always working still has imports like this: `import { Button } from '@mui/material'`, including the ThemeProvider component, so it's unclear to me why changing the imports in the offending app has made a difference but at least it's working now.

Hope this helps :)

Thanks, today I was writing my personal project and inexplicably got

Uncaught TypeError: styled_default is not a function"
at Grid2.js:7:26

error.

When I checked against your troubleshooting steps and changed the "@mui/material/Unstable_Grid2/Grid2" dependency to "@mui/material/Unstable_Grid2", my project was able to run normally again. This works great for me.

[itbali]

this helped me:

in vite.config.ts:

...pluginsAndOtherStuff,

  optimizeDeps: {
    include: ['@mui/material', '@emotion/react', '@emotion/styled'],
  }

second thing that could help:

go to node_modules and remove directory ".vite"
it's used by VITE for caching mechanism and sometimes it also resolves the issue.

third option for solving this issue:

upgrade/downgrade MUI version and then rollback changes (it's also changing mechanism of loading modules sometimes)

[pratapsinghr2016]

I guess then we can consider this duplicate of #31835

This resolved issue on my side

[Umarshakoor]

as shown in the picture below i'm facing this error

[Jessy-Yeh]

this helped me:

in vite.config.ts:

...pluginsAndOtherStuff,

  optimizeDeps: {
    include: ['@mui/material', '@emotion/react', '@emotion/styled'],
  }

Thank you, this helps!!!

[Umarshakoor]

Thanks Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Jessy Yeh ***@***.***> Sent: Wednesday, July 10, 2024 1:58:23 PM To: mui/material-ui ***@***.***> Cc: Umar Shakoor ***@***.***>; Comment ***@***.***> Subject: Re: [mui/material-ui] Uncaught TypeError: styled_default is not a function (Issue #36511) this helped me: in vite.config.ts: ...pluginsAndOtherStuff, optimizeDeps: { include: ***@***.***/material', ***@***.***/react', ***@***.***/styled'], } Thank you, this helps!!! — Reply to this email directly, view it on GitHub<#36511 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A77TIDZ5HXII5TS4WOMHLBLZLTZS7AVCNFSM6AAAAAAV2K5SJ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJZHE2DMMZYGY>. You are receiving this because you commented.Message ID: ***@***.***>

[web-dev-london]

this helped me:

in vite.config.ts:

...pluginsAndOtherStuff,

  optimizeDeps: {
    include: ['@mui/material', '@emotion/react', '@emotion/styled'],
  }

This resolved issue on my side Thank you so much itbali

[JuvitaSaini09]

I have solved this issue by updating vite.config.js:
check notion notes:https://periodic-visage-ac7.notion.site/V2-styled_default-is-not-a-function-error-Solution-54c14be940ca49bd8e4eaf829c0ed897

optimizeDeps in vite.config.js

[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]

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!

[eddiemonge]

@Janpot how does that help everyone still on v5?

[JuvitaSaini09]

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.

OK Thankyou

[fum4]

@Janpot so am i supposed to invest time to migrate to v6 right away in order to be able to run my app....? is there no fix for v5 users?