Popper.js:9 Uncaught TypeError: styled_default is not a function

[mayankpandav]

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 ```

[abhinav-22-tech]

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

[mayankpandav]

@abhinav-22-tech

installed mui and try to run with vite can you make demo with vite?

[abhinav-22-tech]

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"

[abhinav-22-tech]

You also clone this repository: https://github.com/mui/material-ui/tree/master/examples/vitejs

[raphaelmelo]

I'm having the same problem.

[mayankpandav]

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

[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

[mayankpandav]

Hello @abhinav-22-tech can you try this repo ? https://github.com/mayankpandav/demo_mui_vite

[abhinav-22-tech]

Hey, @mayankpandav it works correctly. I am using Windows 10.

https://user-images.githubusercontent.com/66718489/168234149-3d0aa121-9ec0-4de6-8b71-f61397c9570f.mp4

[danishalikhan6888]

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

[mayankpandav]

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

[MatheusMoselli]

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.

[abhinav-22-tech]

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.

[abhinav-22-tech]

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

[dougrday]

Our team is seeing the same error.

It seems to be:

1. Related to using Vite.
2. Intermittent, the problem comes and goes.
3. Resolved (sometimes) by pnpm prune or removing node_modules folders

[mayankpandav]

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

[ffelipercamargo]

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

[ffelipercamargo]

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.

[mayankpandav]

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

[harui2019]

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.

[abhinav-22-tech]

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.

[bluwy]

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)

[BohdanKov]

I replaced import { Button } from '@mui/material'; to import Button from '@mui/material/Button'; and it helped me

[mayankpandav]

I replaced import { Button } from '@mui/material'; to import 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

[JoelBrenstrum]

I managed to get around the issue here

https://github.com/vitejs/vite/issues/8308#issuecomment-1145481581

[vitorinoguilherme]

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.

[dougrday]

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"
    },

[pulkitvyas08]

Facing the same error. None of the solutions here fix this

[mayankpandav]

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"
    },

works for me

[WSINTRA]

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/

[femi-Zedev]

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

[aksalsf]

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"

[alyssaMoonStruck]

I replaced import { Button } from '@mui/material'; to import 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

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.

[yayapao]

Got the same issue. It worked for me to downgrade vite from 3.0.9 to 3.0.8!

[femi-Zedev]

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

[wunderman4]

Ran into same issue using vite@3.0.0, upgraded to 3.1.0 and its working as expected now.

[neptune0xf]

Same issue ,tried ,no luck

1. vite@3.0.8 vite@3.1.0 vite@3.2.3
2. 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)

[vladyslav-n]

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.

[sergey-doxel]

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.

[stoplion]

still issueeeee

[SimonGolms]

This worked for me:

- import { CssBaseline } from '@mui/material';
+ import CssBaseline from '@mui/material/CssBaseline';

[bramvile]

For me it was:

- import { styled } from "@mui/material";
+ import { styled } from "@mui/material/styles"

[Ploffi]

Update to vite@4 and @vitejs/plugin-react-swc instead of @vitejs/plugin-react solved my problem

[cheatsnake]

I got this error after installation npm i nanoid. I removed this package npm uninstall nanoid and now all works.

[dapize]

[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.

[rod-stuchi]

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"

[jomefavourite]

Please how do I fix this error?

I've tried everything on here yet, but I can't get it working 😭.

[mesopa]

Is there any update related to the origin of this problem? It's very unpredictable.

[kianaztayefeh-buchinger]

Is there any solution ? I have the same error.

[PupoSDC]

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.