material-ui
material-ui copied to clipboard
mui
Popper.js:9 Uncaught TypeError: styled_default is not a function
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] 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
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
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.
https://user-images.githubusercontent.com/66718489/168234149-3d0aa121-9ec0-4de6-8b71-f61397c9570f.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: https://github.com/vitejs/vite/issues/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 https://github.com/vitejs/vite/issues/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
https://github.com/vitejs/vite/issues/8308#issuecomment-1145481581
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"
},
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/
