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

[mayankpandav]

Duplicates

• I have searched the existing issues

Latest version

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

screenshot.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: vitejs/vite#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 vitejs/vite#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

[RHeynsZa]

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

[ramyareye]

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

[HeavenlyEntity]

❗ This is happening in with next Next.js latest version 13.5.4 entire application is not rendering. Worked before update. To get it working had to delete the .lock, .next folder, and run npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules because I have a monorepo to clear all node_modules folders. Then if you have yarn berry (v3) you have to delete the .cache folder then run yarn at the root directory.

This fixed my issue. ✅

[jaballogian]

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

[duongdominhchau]

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

[duongdominhchau]

So, after hours of digging into the bundles, I think this problem is essentially incorrect initialization order. This is what the compiled main.tsx looks like:

// ...
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 @mui_material.js, styled_default is imported from chunk-J2WZ6BU3.js which in turn is set like this:

  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 2 suffixes are removed when they are exported. Note that var is used, so before init_styled2 is called, styled_default2 will be undefined. init_styled2 is called after the imports in @mui_material.js. @mui_material.js also import @mui_material_Unstable_Grid2.js before calling init_styled2().

Inside @mui_material_Unstable_Grid2.js, it imports Grid2_default from chunk-JOMVIVVB.js which is defined as

var Grid2 = createGrid({
    createStyledComponent: styled_default("div", {
      // ...
    }),
    // ...
});
var Grid2_default = Grid2;

So, when @mui_material is imported, it needs to import styled_default (which is undefined until init_styled is called) and Grid2_default (which depends on the result of styled_default()). Then after the import finished it will call init_styled() to initialize styled_default to the expected function.

Below are some small files I wrote to further minimize the problem. I ran node main.mjs and got the same error message, so hopefully my investigation is correct.

// 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 init_styled before it reaches the line defining Grid2_default. Because this involves generated bundles, I added them to the repo mentioned in previous comment for easier comparison.

In the working case, it's @mui_material -> chunk-CCUX6TE2 -> chunk-J2WZ6BU3, then init_styled() on line 305 and finally var Grid2 = createGrid({ something: styled_default(...) }), both of them happen in the same file.

In the breaking case, it's like this

@mui_material --(1)-> chunk-JOMVIVVB -> chunk-J2WZ6BU3 (call `styled_default`)
      |
      |-----(2)-----> chunk-E5H6LDRG (first call to `init_styled` of `chunk-J2WZ6BU3`)

(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 🤷

[anambiar7200]

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.

[duongdominhchau]

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

[HanKienjd]

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

[mayankpandav]

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

[undefined-dev74]

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

[Loschcode]

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 react-error-boundary into the package.json, installing it, and not even using it, it crashes in the same fashion as everyone else

chunk-M26YCEJF.js?v=274de583:43 Uncaught TypeError: styled_default is not a function
    at chunk-M26YCEJF.js?v=274de583:43:18

[Methuselah96]

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, @mui/icons-material is CJS while @mui/material is ESM, so I believe #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.

[undefined-dev74]

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

[aqeelat]

My issue only appeared when I switched from default imports to named imports.
Optimize deps wasn't helpful at all.

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)

[pmNiko]

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

    "paths": {
      "#src/*": [
        "./src/*"
      ]
    }

    resolve: {
      alias: {
        "#src": path.resolve(__dirname, "./src"),
      },
    },

I hope it helps someone.
Best regards.

[satishrepocodeji]

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

This worked for me too :) thanks.

[IamNuru]

deleting my node_modules and then running vite serve --force works for me.

[Janpot]

Even though it may not necessarily look like it, we have reason to believe that the root cause of this issue actually lies in @mui/icons-material and has now been resolved. This fix is available in version 6.1.0 and up. As such we are closing this and a few similar issues.

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.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @mayankpandav! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[floresf]

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 import '@mui/material/styles/styled' as the first statement in the root index.js file of my React app. It properly initializes the styled function that was causing the error.

Hope this helps!