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 |
|
❗ 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. |
This worked for me too :) thanks. |
|
deleting my |
|
Even though it may not necessarily look like it, we have reason to believe that the root cause of this issue actually lies in 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. |
|
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Note We value your feedback @mayankpandav! How was your experience with our support team? |
|
I also experienced this issue. I'm running a Vite React app. I tried all of the suggestions above with zero success. What worked for me was to simply add Hope this helps! |
Worked for me! |
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: