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

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

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’m having the same problem.

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.

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:5

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)

Delete Vite cache and that would be enough

@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"],
 },
});

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”

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

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

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'],
    },
  }),
],

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

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'],
  },
});

Thanks it’s worked for me, thanks a lot

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

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.

Adding to vite.config.ts also worked:

optimizeDeps: {
      include: ['@mui/material/Tooltip'],
    }

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

same problem with vite and npm, all latest versions

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.

Happy New Year everyone forget the past and enjoy today life will have lots of errors forget old errors, create new errors

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

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.

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

This helped me with the problem … I ran “npm install @mui/system” and it started working

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

still issueeeee

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)

It is pinned down, https://github.com/evanw/esbuild/issues/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 https://github.com/mui/material-ui/issues/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.

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

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

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';

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.

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 https://github.com/mui/material-ui/issues/35233#issuecomment-1696918421, 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).

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

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.

Same problem with vite and pnpm, all last versions.

Is there any solution ? I have the same error.

This worked for me:

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

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.

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.

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

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"], }, });

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']
    }

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 https://github.com/mui/material-ui/pull/38742 to add type definitions to @mui/icons-material/esm.

I have narrowed down the issue a bit and created an issue on esbuild: https://github.com/evanw/esbuild/issues/3357.

After all day fighting, npm cache clean --force worked for me 😄

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

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;

Note: this issue got fixed for me once i updated all my material imports to : import { KeyboardBackspace} from “@mui/icons-material”;

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

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

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

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

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

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.

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.

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"