Popper.js:9 Uncaught TypeError: styled_default is not a function #32727
Comments
mayankpandav
added
the
status: waiting for maintainer
|
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 |
|
You can follow this example: https://stackblitz.com/edit/github-1ta5zk?file=src%2FApp.jsx |
|
You also clone this repository: https://github.com/mui/material-ui/tree/master/examples/vitejs |
|
I'm having the same problem. |
i have that dependencies on my project |
|
It's working in my system. Here is the code which I am using:: https://github.com/abhinav-22-tech/vite-react-example
|
|
Hello @abhinav-22-tech |
|
Hey, @mayankpandav it works correctly. I am using Windows 10. screenshot.mp4 |
|
Hello eveyone
|
|
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. |
This is a rare error seen by many people. @MatheusMoselli can you provide a repository, we will be trying to figure it out. |
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:
|
@abhinav-22-tech |
|
same problem "@material-ui/styles": "4.11.5", |
|
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 on Ubuntu: and this issue just happened when I merge the branch from the teammate of my projects. So I check the changes on and comment out the usage of 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) |
siriwatknp
added
external dependency
|
I replaced |
|
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 |
oliviertassinari
added
bug 🐛
|
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 and then configures vite I ran the component tests, and it suddenly works as expected without the 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 |
|
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. |
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: |
|
this worked for me For me worked by change the ThemeProvider export path after
previously
|
|
❗ This is happening in with This fixed my issue. ✅ |
|
I also had a similar issue. The problem came from calling the MUI 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 Update: Immediately after posting this comment, I tried merging the import of I captured the
|
|
So, after hours of digging into the bundles, I think this problem is essentially incorrect initialization order. This is what the compiled // ...
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 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 Inside var Grid2 = createGrid({
createStyledComponent: styled_default("div", {
// ...
}),
// ...
});
var Grid2_default = Grid2;So, when Below are some small files I wrote to further minimize the problem. I ran node // 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 In the working case, it's In the breaking case, it's like this (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). |
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 |
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 |
|
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, |
|
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.
|
|
My issue only appeared when I switched from default imports to named imports. 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) |
|
Popper.js:9 Uncaught TypeError: styled_default is not a function - Three days ago, I encountered this error I am using: {
"vite": "^5.2.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.9",
"@types/node": "^20.14.2",
"react-router-dom": "^6.23.1"
}The issue was that the import alias I was using conflicted with the @mui imports. Therefore, I edited my alias from "@" to "#src" in both the vite.config.ts and tsconfig.json "paths": {
"#src/*": [
"./src/*"
]
} resolve: {
alias: {
"#src": path.resolve(__dirname, "./src"),
},
},I hope it helps someone. |
and others
Duplicates
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`
The text was updated successfully, but these errors were encountered: