material-ui: Uncaught TypeError: styled_default is not a function

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"

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.

• 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

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";

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

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 😃

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.

I had the same problem, after I used Unstable_Grid2

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

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