Popper.js:9 Uncaught TypeError: styled_default is not a function
Closed this issue Β· 105 comments
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior π―
ο»Ώ
Popper.js:9 Uncaught TypeError: styled_default is not a function
im not able to run my app
Expected behavior π€
it should run
Steps to reproduce πΉ
Steps:
installed mui and try to run with vite
Context π¦
No response
Your environment π
`npx @mui/envinfo`
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
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
installed mui and try to run with vite
can you make demo with vite?
You can follow this example: https://stackblitz.com/edit/github-1ta5zk?file=src%2FApp.jsx
You need to install peer dependencies emotion.
"@emotion/react", "@emotion/styled"
You also clone this repository: https://github.com/mui/material-ui/tree/master/examples/vitejs
I'm having the same problem.
You can follow this example: https://stackblitz.com/edit/github-1ta5zk?file=src%2FApp.jsx You need to install peer dependencies
emotion."@emotion/react", "@emotion/styled"
i have that dependencies on my project
@abhinav-22-tech
It's working in my system. Here is the code which I am using:: https://github.com/abhinav-22-tech/vite-react-example
Can you please elaborate on your situation so I can reproduce it? @mayankpandav
Does anybody confirm this? cc: @hbjORbj
Thank you
Hello @abhinav-22-tech
can you try this repo ?
https://github.com/mayankpandav/demo_mui_vite
Hey, @mayankpandav it works correctly. I am using Windows 10.
screenshot.mp4
Hello eveyone
I also have same problem can you please tell me how can i sort this issue . my project is large scale project i can not delete or recreate , i have updated popper.js latest version , i am usgin reactjs with vite
dear @abhinav-22-tech we need to get work on every os we are not depending on windows and mostly its happen for rare user so we need good solution can you check my repository and install every modules and run that project only instead putting grids and container
Hi, the same error happened to me. I created a branch using an old commit and it worked, but when I tried to downgrade my current branch to the same versions as the old branch it didn't resolve.
Hi, the same error happened to me. I created a branch using an old commit and it worked, but when I tried to downgrade my current branch to the same versions as the old branch it didn't resolve.
This is a rare error seen by many people. @MatheusMoselli can you provide a repository, we will be trying to figure it out.
dear @abhinav-22-tech we need to get work on every os we are not depending on windows and mostly its happen for rare user so we need good solution can you check my repository and install every modules and run that project only instead putting grids and container
Your repository working properly, here it is: https://codesandbox.io/s/serene-cohen-ddy7c2?file=/src/App.jsx
Our team is seeing the same error.
It seems to be:
- Related to using Vite.
- Intermittent, the problem comes and goes.
- Resolved (sometimes) by
pnpm pruneor removingnode_modulesfolders
https://codesandbox.io/s/serene-cohen-ddy7c2?file=/src/App.jsx
@abhinav-22-tech
can you use vmware and add Ubuntu or new os our there and try on it
same problem
"@material-ui/styles": "4.11.5",
"@mui/base": "5.0.0-alpha.79",
"@mui/icons-material": "5.5.0",
"@mui/material": "5.6.4",
"@mui/styles": "5.2.3",
"@mui/x-data-grid": "5.6.0",
Encontrei a solução, no meu caso, o problema foi o vite, fiz um downgrade para a versão 2.8.6 e o erro sumiu, acredito que existe algum conflito na versão 2.9.0 do vite com o popper.
Encontrei a solução, no meu caso, o problema foi o vite, fiz um downgrade para a versão 2.8.6 e o erro sumiu, acredito que existe algum conflito na versão 2.9.0 do vite com o popper.
no luck for me
I have same problem on my project, and I tried on Windows 11, Ubuntu20.04, and MacOS with same result.
The following are the output of npx @mui/envinfo
on Mac
System:
OS: macOS 12.3.1
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 1.22.18 - ~/Documents/../../web/node_modules/.bin/yarn
npm: 8.10.0 - ~/Documents/../../web/node_modules/.bin/npm
Browsers:
Chrome: Not Found
Edge: Not Found
Firefox: Not Found
Safari: 15.4
npmPackages:
@emotion/react: ^11.6.0 => 11.9.0
@emotion/styled: ^11.6.0 => 11.8.1
@mui/base: ^5.0.0-alpha.74 => 5.0.0-alpha.81
@mui/icons-material: ^5.4.1 => 5.8.0
@mui/material: ^5.5.3 => 5.8.0
@mui/private-theming: 5.8.0
@mui/styled-engine: 5.8.0
@mui/styles: ^5.5.3 => 5.8.0
@mui/system: 5.8.0
@mui/types: 7.1.3
@mui/utils: 5.8.0
@mui/x-data-grid: ^5.8.0 => 5.11.1
@types/react: 18.0.9
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
on Ubuntu:
System:
OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
Binaries:
Node: 17.4.0 - ~/.nvm/versions/node/v17.4.0/bin/node
Yarn: 1.22.18 - ~/ζδ»Ά/../../web/node_modules/.bin/yarn
npm: 8.10.0 - ~/ζδ»Ά/../../web/node_modules/.bin/npm
Browsers:
Chrome: Not Found
Firefox: 100.0.2
npmPackages:
@emotion/react: ^11.6.0 => 11.9.0
@emotion/styled: ^11.6.0 => 11.8.1
@mui/base: ^5.0.0-alpha.74 => 5.0.0-alpha.81
@mui/icons-material: ^5.4.1 => 5.8.0
@mui/material: ^5.5.3 => 5.8.0
@mui/private-theming: 5.8.0
@mui/styled-engine: 5.8.0
@mui/styles: ^5.5.3 => 5.8.0
@mui/system: 5.8.0
@mui/types: 7.1.3
@mui/utils: 5.8.0
@mui/x-data-grid: ^5.8.0 => 5.11.1
@types/react: 17.0.45
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: 4.6.4
and this issue just happened when I merge the branch from the teammate of my projects.
So I check the changes on package.json when my teammates add some new dependencies.
I remove their addition of
"dependencies": {
...,
"@fvilers/disable-react-devtools": "^1.3.0",
...
},
and comment out the usage of
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
then it works, my app runs successfully with vite.
Hope this information can help.
This error is related to vite, not related to MUI. This kind of error was seen earlier: vitejs/vite#1853 but didn't find out why this error comes in the latest vite.
This may likely be a Vite bug (or esbuild) as well. If anyone can reproduce this issue and provide a repo or stackblitz, that would be really helpful here and for vitejs/vite#8308. Otherwise it's hard to take action. (Can't reproduce the issue from the conversation above)
I replaced
import { Button } from '@mui/material';
to
import Button from '@mui/material/Button';
and it helped me
I replaced
import { Button } from '@mui/material';toimport Button from '@mui/material/Button';and it helped me
https://github.com/mayankpandav/demo_mui_vite no luck even not using Button on demo repository
@BohdanKov
I managed to get around the issue here
I had the same error with vite/mui when installed the eslint-plugin-import-helpers dependency.
I tried everything, the only solution for me was revert the commit.
Since we've updated all our packages in package.json we've no longer encountered this issue. Perhaps it's been fixed as part of another (unrelated) bug fix?
Here's what we're using - and haven't seen the errors since:
"dependencies": {
"@emotion/react": "~11.9.0",
"@emotion/styled": "~11.8.1",
"@mui/icons-material": "~5.8.0",
"@mui/material": "~5.8.0",
"@mui/system": "~5.8.0",
"@mui/x-date-pickers": "5.0.0-alpha.3",
"date-fns": "~2.28.0",
"nanoid": "^3.3.4",
"react": "~18.1.0",
"react-dom": "~18.1.0",
"react-router-dom": "~6.3.0",
"rxjs": "~7.5.5"
},
"devDependencies": {
"@babel/core": "~7.18.0",
"@types/react": "~18.0.10",
"@types/react-dom": "~18.0.5",
"@vitejs/plugin-react": "~1.3.2",
"typescript": "~4.6.4",
"vite": "~2.9.9"
},
Facing the same error. None of the solutions here fix this
Since we've updated all our packages in
package.jsonwe've no longer encountered this issue. Perhaps it's been fixed as part of another (unrelated) bug fix?Here's what we're using - and haven't seen the errors since:
"dependencies": { "@emotion/react": "~11.9.0", "@emotion/styled": "~11.8.1", "@mui/icons-material": "~5.8.0", "@mui/material": "~5.8.0", "@mui/system": "~5.8.0", "@mui/x-date-pickers": "5.0.0-alpha.3", "date-fns": "~2.28.0", "nanoid": "^3.3.4", "react": "~18.1.0", "react-dom": "~18.1.0", "react-router-dom": "~6.3.0", "rxjs": "~7.5.5" }, "devDependencies": { "@babel/core": "~7.18.0", "@types/react": "~18.0.10", "@types/react-dom": "~18.0.5", "@vitejs/plugin-react": "~1.3.2", "typescript": "~4.6.4", "vite": "~2.9.9" },
works for me
For me it was related to the Timepicker component.
Only noticed the error when I was playing around with my route components and rendering various test pages.
Solution, I removed our previous Timepicker import from using @mui/labs and updated it per docs
https://mui.com/x/react-date-pickers/getting-started/
Got the same issue, what worked for me is removing node_modules and reinstalling dependencies. I assume the issue is related to vite caching system. It goes really fast even for a big project when you are using yarn or pnpm
Got the same issue. Already removing node_modules and reinstalling again, but it didn't work. Happened when using ThemeProvider.
Resolved by export the ThemeProvider properly using
import { ThemeProvider } from '@mui/material/styles';
previously
import { ThemeProvider } from '@mui/material';
"@mui/material": "^5.10.0"
"vite": "^3.0.5"
I replaced
import { Button } from '@mui/material';toimport Button from '@mui/material/Button';and it helped mehttps://github.com/mayankpandav/demo_mui_vite no luck even not using Button on demo repository @BohdanKov
But why is this the case? It should work in either instance. Please advice - issue is not resolved. unsure why the thread has been closed.
Got the same issue. It worked for me to downgrade vite from 3.0.9 to 3.0.8!
As people said this issue is probably related to a version of Vite (lower to 3.0 I guess) who provides a bad type for a function in Popper.js
Ran into same issue using vite@3.0.0, upgraded to 3.1.0 and its working as expected now.
Same issue ,tried ,no luck
- vite@3.0.8 vite@3.1.0 vite@3.2.3
- upgrade all package to newest version
Finally
after rm -rf node_modules and reinstall all dependencies, it works (I tried before, not work ,but works now)
Same issue "vite": "^3.1.8"
My system is macOS Big Sur MacBook Air M1, node v18.
Sadly, the only thing that makes it work for me is removing node_modules and then fresh-installing modules WHILE HAVING SOME SYNTAX ERROR IN SOME .tsx FILE π€― After that you can remove the syntax error you planted before and everything work. But whatever I do without the installation with self-planted error in the code β it just simply won't run properly.
UPD. Removing unused package styled-components seems to solve the problem.
The only thing that helped me to get unblocked was to go to Popper.js file in node_modules (node_modules/@mui/material/Popper/Popper.js) and then commenting out this code
//const PopperRoot = styled(PopperUnstyled, {
// name: 'MuiPopper',
// slot: 'Root',
// overridesResolver: (props, styles) => styles.root
//})({});
After that I had to replace PopperRoot with PopperUnstyled in the same file here
const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
const theme = useTheme();
const props = useThemeProps({
props: inProps,
name: 'MuiPopper'
});
// replace PopperRoot with PopperUnstyled
return /*#__PURE__*/_jsx(PopperUnstyled, _extends({
direction: theme == null ? void 0 : theme.direction
}, props, {
ref: ref
}));
});
Please note that this solution doesn't actually fixes the issue, but it will unblock you for the local development.
This worked for me:
- import { CssBaseline } from '@mui/material';
+ import CssBaseline from '@mui/material/CssBaseline';For me it was:
- import { styled } from "@mui/material";
+ import { styled } from "@mui/material/styles"Update to vite@4 and @vitejs/plugin-react-swc instead of @vitejs/plugin-react solved my problem
I got this error after installation npm i nanoid.
I removed this package npm uninstall nanoid and now all works.
[EspaΓ±ol]
BorrΓ© la carpeta node_modules, tmb el yarn.lock, y reinstalΓ© todo de nuevo y listo se solucionΓ³ el error π. Por cierto antes de reinstalar verifiquΓ© si tenΓa algΓΊn paquete para actualizar con el CLI llamado 'npm-check-updates'.
[English]
Deleting the node_modules folder, deleting the yarn.lock and reinstalling everything fixed the problem π. By the way you can use the 'npm-check-updates' CLI for update all your packages that you are use it, of course before the reinstallation.
I had to lock the version (without the ^) in package.json to get around this problem.
"@devexpress/dx-core": "4.0.2"
"@devexpress/dx-grid-core": "4.0.2"
"devexpress/and-so-on": "4.0.2"Vite versions
"@vitejs/plugin-react-swc": "^3.1.0",
"vite": "^4.1.1",
"vite-plugin-svgr": "^2.4.0"Please how do I fix this error?
I've tried everything on here yet, but I can't get it working π.
Is there any update related to the origin of this problem? It's very unpredictable.
Is there any solution ? I have the same error.
I am too struggling with this issue for the last couple of weeks. In my particular case im using Storybook with vite, so that's the only environment this becomes a issue.
As many others, I too struggle with the instability of this issue. Previously, i had pinned vite to 4.1.1, and that solved the issue. However today i fiddled with some dependencies and this was broken for good. Even after reverting on a fresh clone did vite work.
Finally I solved the issue when i relized the problem was not with my code but rather with an unrelated import of JoyListButton from preview.js. This is a component I don't even use in my project. So the fix was as simple as
--- a/libs/react-components/.storybook/preview.tsx
+++ b/libs/react-components/.storybook/preview.tsx
@@ -1,14 +1,16 @@
import { useEffect } from "react";
-import { CssBaseline, Typography } from "@mui/joy";
+import { default as Typography } from "@mui/joy/Typography";
+import { default as CssBaseline } from "@mui/joy/CssBaseline";I hope this helps someone.
Since we've updated all our packages in
package.jsonwe've no longer encountered this issue. Perhaps it's been fixed as part of another (unrelated) bug fix?
Here's what we're using - and haven't seen the errors since:"dependencies": { "@emotion/react": "~11.9.0", "@emotion/styled": "~11.8.1", "@mui/icons-material": "~5.8.0", "@mui/material": "~5.8.0", "@mui/system": "~5.8.0", "@mui/x-date-pickers": "5.0.0-alpha.3", "date-fns": "~2.28.0", "nanoid": "^3.3.4", "react": "~18.1.0", "react-dom": "~18.1.0", "react-router-dom": "~6.3.0", "rxjs": "~7.5.5" }, "devDependencies": { "@babel/core": "~7.18.0", "@types/react": "~18.0.10", "@types/react-dom": "~18.0.5", "@vitejs/plugin-react": "~1.3.2", "typescript": "~4.6.4", "vite": "~2.9.9" },works for me
This helped me with the problem .... I ran "npm install @mui/system" and it started working
Same problem with vite and pnpm, all last versions.
same problem with vite and npm, all latest versions
same problem with vite and npm, all latest versions
Uncaught TypeError: styled_default is not a function
at Grid2.js:5:26
(anonymous) @ Grid2.js:5Ok please, this issue has been open for 12 months. And a solution or workaround has not been found.
My entire team has ground to a halt due to this issue, and every fix seems to be the luck of the draw. Some solutions have worked for us for a few hours only for it to reappear.
Is there anything I can do to help draw more developer time to this issue, it is really impacting the team.
We could get rid of the error by converting all MUI icons imports to this format:
import { FeedbackOutlined } from '@mui/icons-material'; instead of` import FeedbackOutlinedIcon from '@mui/icons-material/FeedbackOutlined';
We import MUI components directly (import Button from '@mui/material/Button';) but we import the whole '@mui/icons-material' package. That way the error disappeared. Good luck @jacobgad
Here's a blog post that might help some people experiencing this issue out:
https://medium.com/@fael.atom/struggling-with-vite-and-mui-42f3f5e0658d
It's not directly related, but it may lead someone down the rabbit hole that resolves this problem.
thank you to @david-schopf for your help.
I can confirm that changing all the mui icon imports as mentioned:
import { FeedbackOutlined } from '@mui/icons-material';
instead of
import FeedbackOutlinedIcon from '@mui/icons-material/FeedbackOutlined';
has permanently fixed the problem for us. I did not need to change the mui imports to direct imports, just changing the icons did the trick.
We could get rid of the error by converting all MUI icons imports to this format:
import { FeedbackOutlined } from '@mui/icons-material';instead of` import FeedbackOutlinedIcon from '@mui/icons-material/FeedbackOutlined';We import MUI components directly (
import Button from '@mui/material/Button';) but we import the whole '@mui/icons-material' package. That way the error disappeared. Good luck @jacobgad
Based on @david-schopf comment I can confirm that changing the imports for just the icons does work around the problem. You'll notice however that your dev build will be larger (probably doesn't matter). Your prod build also ends up transforming about 10,000 addition files (every icon in the package, rather than just the ones you used) but it's size seems unaffected. I guess it successfully tree shakes the unused icons.
Based on @dougrday comment I added the following to my vite.config.ts and it resolves the problem keeping the imports 'as is'. (eg import ArrowBackIcon from '@mui/icons-material/ArrowBack';).
optimizeDeps: {
include: ['@mui/icons-material'],
},
ps) when messing around with this it pays to use vite serve --force to make sure it's not caching anything inside node_modules/.vite.
vite serve --force
Thanks , this seems to be working for me <3
I get the same error and i did npm ci then npm run dev now it is working. Hope you get same results.
Note: this issue got fixed for me once i updated all my material imports to :
import { KeyboardBackspace} from "@mui/icons-material";
I solved it like this
import Grid from '@mui/material/Unstable_Grid2'; (Error)
import Grid from '@mui/material/Unstable_Grid2/Grid2'; (Good)
and
./node_modules/.vite <---- delete
$ npm run dev
Etc ...
import { TextField } from '@mui/material'; (X)
import TextField from '@mui/material/TextField'; (O)
I had an issue with Grid2.
Fixed by importing icons from the mat directly which is mentioned in the above comments.
I was confused about applying the fix. If anybody has the same confusion here is what I did.
Import all icons from @mui/icons-material directly and remove the Icon key from the icon name.
// Before (how it is described in docs)
import FavoriteIcon from "@mui/icons-material/Favorite";
import ShareIcon from "@mui/icons-material/Share";
import AddIcon from "@mui/icons-material/Add";
// After
import { Add, Share, Favorite } from "@mui/icons-material";
This fix works for me:
import { Popper } from "@mui/material"; => import Popper from "@mui/material/Popper";
@mui/material/Unstable_Grid2/Grid2
this works for me
I was having this issue all of a sudden after adding mui icons to my project. Nothing was fixing it, I kept getting an error about:
Uncaught TypeError: styled_default is not a function
at Grid2.js:5:26
Then I remembered I was using Grid2, and applied the change suggested by @samipshresthaq. Updating the import for Grid2 so it was this:
import Grid from '@mui/material/Unstable_Grid2/Grid2';Solved my issue.
Adding import "@emotion/react" at the top of the entry file helped me.
I am not sure but I think it can be somehow related to imports order. I think MUI, requires a specific order for the imports to work properly. The @emotion/react and @emotion/styled packages need to be imported before importing @mui/material. But I can't find confirmation of this in their docs.
Or u can try to add this code to your Vite config.
optimizeDeps: {
include: ["@emotion/react", "@emotion/styled"],
},@denchiklut solution worked for me.
Here is my vite.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
server: {
open: true,
},
plugins: [
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
],
optimizeDeps: {
include: ["@emotion/react", "@emotion/styled"],
},
});For me helped to solve the issue adding an import to the entry file AND assigning the import to a variable (so vite doesn't remove the unused import):
import { styled } from "@mui/material/styles"
const fixViteIssue = styled;Adding to vite.config.ts also worked:
optimizeDeps: {
include: ['@mui/material/Tooltip'],
}if you have problem with Grid2, you can fix that by mapping dependency alias inside vite config file
resolve: { alias: { "@mui/material/Unstable_Grid2": "@mui/material/Unstable_Grid2/Grid2",
After all day fighting, npm cache clean --force worked for me :D
hi everyone. try this
import Grid from '@mui/system/Unstable_Grid'
I am also having same issue with
import Grid from '@mui/material/Unstable_Grid2';
Optimizing @mui/material/Unstable_Grid2 worked for me in vite.config.ts π
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import basicSsl from '@vitejs/plugin-basic-ssl';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), basicSsl()],
optimizeDeps: {
include: ['@mui/material/Tooltip', '@emotion/styled', '@mui/material/Unstable_Grid2'],
},
});I have narrowed down the issue a bit and created an issue on esbuild: evanw/esbuild#3357.
The issue in this case only occurs when CJS and ESM are mixed. In the projects I'm working on, @mui/icons-material is the only CJS that is importing from @mui/material so switching to @mui/icons-material/esm fixes the issue (also discussed here).
The only issue is that @mui/icons-material/esm don't have type definitions, so I've opened #38742 to add type definitions to @mui/icons-material/esm.
Unfortunately adding types to @mui/icons-material/esm is a no-go. Therefore, I am currently patching the package.json of @mui/icons-material like so:
"author": "MUI Team",
"description": "Material Design icons distributed as SVG React components.",
"main": "./index.js",
+ "exports": {
+ ".": {
+ "types": "./index.d.ts",
+ "import": "./esm/index.js",
+ "require": "./index.js"
+ },
+ "./esm/*.js": {
+ "types": "./*.d.ts",
+ "import": "./esm/*.js",
+ "require": "./*.js"
+ },
+ "./*": {
+ "types": "./*.d.ts",
+ "import": "./esm/*.js",
+ "require": "./*.js"
+ }
+ },
"keywords": [
"react",
"react-component",This is similar to #35233 (comment), however I don't think it should have a "type": "module" since the .js files at the top level shouldn't be interpreted as ESM by default. I also added a ./esm/*.js condition since I had another dependency that was depending on those to exist.
Hopefully this can get resolved, either by esbuild, Vite, or MUI (by adding a way to import from ESM without custom configuration).
Delete Vite cache and that would be enough
I still get this issue, I tried everthing here...
Why is that??
I am also having this issue, which comes and goes. It's temporarily resolved when I remove yarn.lock and node_modules and reinstall.
@dansilva-8
I found out that is a porblem with mui icons, you can change the package.json of it like written here, now it works fine!
#35233 (comment)
None of these suggestions worked for me, but the babel plugin did. I followed this guide: https://dev.to/glocore/configure-emotion-with-your-vite-react-project-7jl
Which essentially adds the babel plugin to dev dependencies with
npm install @emotion/react
npm install -D @emotion/babel-plugin
and then configures vite
export default defineConfig({
plugins: [
react({
jsxImportSource: "@emotion/react",
babel: {
plugins: ["@emotion/babel-plugin"],
},
}),
],
});
I ran the component tests, and it suddenly works as expected without the styled_default errors I was seeing previously. Hopefully this helps someone else as well
Note: I DO have this setup for my optimizeDeps as well. I'm not sure if it's making any difference, since the issues still occurred until I added the babel plugin, but its worth mentioning just in case
optimizeDeps: {
include: ['@emotion/react', '@emotion/styled', '@mui/icons-material', 'lodash']
}
I don't think the Babel plugin is related. It's hard to test whether you've actually fixed the bug since it's caching related, so it doesn't always show up. It could be that adding the Babel plugin invalidated the Vite cache which may be why it started working after those changes.
optimizeDeps: { include: ["@emotion/react", "@emotion/styled"], },
Thank you so much, this worked for me after I don't even know how many hours of searching and trying - I am gonna post it in the MUI thread as well, lotta folks there still battling with this issue
Would be cool to see the amount of dev hours (and money lost) due to this issue
Edit:
Using Vite, only optimizeDeps worked, nothing else
this worked for me
For me worked by change the ThemeProvider export path
after
import { ThemeProvider } from '@mui/material/styles';
previously
import { ThemeProvider } from '@mui/material';
β This is happening in with next Next.js latest version 13.5.4 entire application is not rendering. Worked before update. To get it working had to delete the .lock, .next folder, and run npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules because I have a monorepo to clear all node_modules folders. Then if you have yarn berry (v3) you have to delete the .cache folder then run yarn at the root directory.
This fixed my issue. β
I also had a similar issue. The problem came from calling the MUI Autocomplete component on my React Vite app. I didn't know why the MUI Autocomplete component could trigger the TypeError: styled_default is not a function from the Popper.js file.
I have solved the problem using the combination of @tiavina-mika and @mikhail-fedosenko answers on the vite.config.js file here:
optimizeDeps: {
include: [
'@emotion/react',
'@emotion/styled',
'@mui/material/Tooltip'
],
},
plugins: [
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
],I forked a repo from someone else having the same problem and try to trim down the unnecessary details, this is what I came up with: https://github.com/duongdominhchau/mui-bug
I reproduced it successfully locally, then I also upload it to https://stackblitz.com/github/duongdominhchau/mui-bug to verify again, still happens as expected. It's the same error, but I'm using Firefox so the message is different, ignore that detail.
I used ncu -u (npm-check-updates) to ensure all these dependencies are up to date. All irrelevant details are removed. Essentially, the problem happens if we mix Box or Grid v2 with @mui/icons-material. I'm on my way trimming it down further, just posting it here early in case someone else is also investigating like me.
Update: Immediately after posting this comment, I tried merging the import of ThemeProvider and createTheme (to import { ThemeProvider, createTheme } from '@mui/material'), the problem disappears!
I captured the node_modules/.vite before the problem disappears, here I can see @mui/material/styles and @mui/material are bundled separately. I'm on my way inspecting the bundles, this list may be useful later
So, after hours of digging into the bundles, I think this problem is essentially incorrect initialization order. This is what the compiled main.tsx looks like:
// ...
import { ThemeProvider } from "/node_modules/.vite/deps/@mui_material.js?v=197ea517";
import { createTheme } from "/node_modules/.vite/deps/@mui_material_styles.js?v=d9b2da10";
import Grid from "/node_modules/.vite/deps/@mui_material_Unstable_Grid2.js?v=10497ca2";
// More code...Inside @mui_material.js, styled_default is imported from chunk-J2WZ6BU3.js which in turn is set like this:
var rootShouldForwardProp, slotShouldForwardProp, styled3, styled_default2;
var init_styled2 = __esm({
"node_modules/@mui/material/styles/styled.js"() {
"use client";
init_esm2();
init_defaultTheme();
init_identifier();
rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== "classes";
slotShouldForwardProp = shouldForwardProp;
styled3 = createStyled3({
themeId: identifier_default,
defaultTheme: defaultTheme_default,
rootShouldForwardProp
});
styled_default2 = styled3;
}
});The 2 suffixes are removed when they are exported. Note that var is used, so before init_styled2 is called, styled_default2 will be undefined. init_styled2 is called after the imports in @mui_material.js. @mui_material.js also import @mui_material_Unstable_Grid2.js before calling init_styled2().
Inside @mui_material_Unstable_Grid2.js, it imports Grid2_default from chunk-JOMVIVVB.js which is defined as
var Grid2 = createGrid({
createStyledComponent: styled_default("div", {
// ...
}),
// ...
});
var Grid2_default = Grid2;So, when @mui_material is imported, it needs to import styled_default (which is undefined until init_styled is called) and Grid2_default (which depends on the result of styled_default()). Then after the import finished it will call init_styled() to initialize styled_default to the expected function.
Below are some small files I wrote to further minimize the problem. I ran node main.mjs and got the same error message, so hopefully my investigation is correct.
// main.mjs
import _ from './all.mjs';
import { TWO } from './unstable.mjs';
console.log(TWO);
// all.mjs
import { initOne } from './one.mjs';
// Uncomment this line for error
// import { TWO as _ } from './unstable.mjs';
initOne();
export default {}
// unstable.mjs
import { one } from './one.mjs';
var TWO = one() + 1;
export { TWO };
// one.mjs
var one;
function initOne() {
one = () => 1
}
export { one, initOne };The reason it works when I merge two imports together is because in that case, the generated bundle has a call to init_styled before it reaches the line defining Grid2_default. Because this involves generated bundles, I added them to the repo mentioned in previous comment for easier comparison.
In the working case, it's @mui_material -> chunk-CCUX6TE2 -> chunk-J2WZ6BU3, then init_styled() on line 305 and finally var Grid2 = createGrid({ something: styled_default(...) }), both of them happen in the same file.
In the breaking case, it's like this
@mui_material --(1)-> chunk-JOMVIVVB -> chunk-J2WZ6BU3 (call `styled_default`)
|
|-----(2)-----> chunk-E5H6LDRG (first call to `init_styled` of `chunk-J2WZ6BU3`)
(1) requires (2) to success, but (1) happens before (2).
Still don't know how to fix, I'm going to copy the existing solutions and just call it a day π€·
I had this issue with the Grid2 component. Turned out the issue was that I had imported Button from mui below it. I reordered them so that Button came first and it worked.
Silly me, I should have checked all the comments from Methuselah96 before doing this, just found out that everything I did has already been done by him. This is probably the bug about unstable code splitting evaluation order which is mentioned in esbuild docs, Vite dev server is fast thanks to esbuild so there is no way to fix this in Vite, if we get this issue we need to fix it via other means.
Well, at least I can rest now knowing that a proper fix does not exist (yet).
Silly me, I should have checked all the comments from Methuselah96 before doing this, just found out that everything I did has already been done by him. This is probably the bug about unstable code splitting evaluation order which is mentioned in esbuild docs, Vite dev server is fast thanks to esbuild so there is no way to fix this in Vite, if we get this issue we need to fix it via other means.
Well, at least I can rest now knowing that a proper fix does not exist (yet).
Because of your explanation, I fixed it by setting the target in tsconfig.json as es5. It's truly magical
Happy New Year everyone forget the past and enjoy today
life will have lots of errors forget old errors, create new errors
Optimizing
@mui/material/Unstable_Grid2worked for me invite.config.tsπimport { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import basicSsl from '@vitejs/plugin-basic-ssl'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), basicSsl()], optimizeDeps: { include: ['@mui/material/Tooltip', '@emotion/styled', '@mui/material/Unstable_Grid2'], }, });
Thanks it's worked for me, thanks a lot
This is not an issue that happens to just a few people, looking at the comments and the frequency, we should really pin it down. I'm facing it, but in my case, it's pretty strange.
When adding react-error-boundary into the package.json, installing it, and not even using it, it crashes in the same fashion as everyone else
chunk-M26YCEJF.js?v=274de583:43 Uncaught TypeError: styled_default is not a function
at chunk-M26YCEJF.js?v=274de583:43:18
It is pinned down, evanw/esbuild#3357 is the root cause.
One of the things that triggers the behavior is the mixing of ESM and CJS. At least in my app, @mui/icons-material is CJS while @mui/material is ESM, so I believe #35233 will incidentally fix it for most people. I have patched the package.json of my app to use the ESM files in @mui/icons-material to work around the issue until then.
I was facing same issue and this helps me in getting resolving the issue, as I am using VITE, You can add popper.js in the dependencies array of Vite.
// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { "@": resolve(__dirname, "src"), }, }, optimizeDeps: { include: ["@mui/material/Tooltip", "@emotion/styled", "@mui/material/Unstable_Grid2", "@tabler/icons-react"], }, });
My issue only appeared when I switched from default imports to named imports.
Optimize deps wasn't helpful at all.
I think what did it for me was adding this config to vite:
resolve: {
alias: [
{
find: /^@mui\/icons-material\/(.*)/,
replacement: "@mui/icons-material/esm/$1",
},
],
},Thanks to vitejs/vite#1853 (comment)