cc: @mnajdova and @jacobgad

Encountered a similar issue using Vite.

This (sometimes) resolves it temporarily for me:

1. Comment <ThemeProvider> and <CssBaseline> and save.
2. npm start or npm run dev.
3. Uncomment <ThemeProvider> and <CssBaseline> and save.
4. Vite updates and it works.

There were times where I tried the steps above and it simply would throw the same error at step 3.

Experiencing this as well with vite

@arpitdalal did you try to remove icons from page: #32891 ?

any solution so far?

@arpitdalal I'm trying to reproduce the error using the codesandbox you provided, but I'm unable to. Perhaps a more recent version of dependencies could solve the problem. Could you please verify if that's the case?

I was also trying to investigate the issue using plain esbuild, but I also wasn't able to make it fail.

in my theme.ts, if I use below, I can reproduce the issue: createTheme_default is not a function

import { createTheme } from '@mui/material/styles';

But if I use this line below, it fixes it:

import { createTheme } from '@mui/material';

remix / material, all npm "latest"

I was getting the Uncaught TypeError: createTheme_default is not a function issue with remix, it had to do with the <CssBaseline />.

If your project was set up using the Remix MUI Example, then the fix for me was to add the <CssBaseline /> to the Layout.tsx file. Like so:

import * as React from "react";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <Container maxWidth="sm">
      <Box sx={{ my: 4 }}>
        <CssBaseline />
        {children}
      </Box>
    </Container>
  );
}

although, still getting TypeError: useEnhancedEffect_default is not a function. Which seems to be fixed when I add icons (@mui/icons-material) to the page... not idea why.

Final Update:
After reading #31140 (comment), I downgraded mui to 5.4.1 and I no longer get the TypeError: useEnhancedEffect_default is not a function. So seems like there is a bug that still needs to be resolved in mui.

experice same issue..

still can find the root cause of the problem..

iam using vite v2.9.9 & "@mui/material": "^5.8.0",

my temp fix,
make error in vite config, undo, recompile

my problem somewhere near :
import Box from "@mui/material/Box";
i changed into :
import {Box}from "@mui/material";

thanks @geneshairzan your temp fix worked for me

my error was
Box.js:5 undefined is not a function

seems to be fixed by changing
import Box from "@mui/material/Box"; this line

to this
import {Box} from "@mui/material";

experice same issue..

still can find the root cause of the problem..

iam using vite v2.9.9 & "@mui/material": "^5.8.0",

my temp fix, make error in vite config, undo, recompile

my problem somewhere near : import Box from "@mui/material/Box"; i changed into : import {Box}from "@mui/material";

worked! thanks

@arpitdalal I'm trying to reproduce the error using the codesandbox you provided, but I'm unable to. Perhaps a more recent version of dependencies could solve the problem. Could you please verify if that's the case?

I was also trying to investigate the issue using plain esbuild, but I also wasn't able to make it fail.

@michaldudak I haven't tried reproducing this error by using just esbuild because I do not have the knowledge to create a raw project with esbuild. But I can definitely reproduce this with Remix's esbuild config. Here's a sandbox with the latest dependencies which uses unstable_useEnhancedEffect from @mui/material pkg in the root.tsx.

Steps to reproduce:

open the site > click on any link > open dev console > hard refresh with ctrl + shift + R (w/e it is for macos). You should see the page breaking with the first error other than react 18 warning will be Uncaught TypeError: useEnhancedEffect_default is not a function which causes a chain of errors resulting in a broken page.

Temporary workaround:

in the codesandbox comment the line 19 and uncomment line 24 which uses the custom useEnhancedEffect. Once done, hard refresh the site and re-try the above steps and the page shouldn't break.

I can confirm that this is related to the @mui/icons-material pkg

Steps to reproduce:

same steps to reproduce as above

Temporary workaround:

open the codesnadbox > comment lines 3, 4, and 42 > uncomment line 43 > this way app is not using @mui/icons-material pkg anywhere, so esbuild won't build that dependency and then retry the above steps of going to the error/catch boundary and hard-refreshing, you shouldn't see any errors related to useEnhancedEffect_default

I want to throw some light on the fact that this only happens when the error/catch boundary is hard-refreshed, meaning SSR'ed, if client-side navigated to these pages, it doesn't break the page.

in my environment

// Failure
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';

// OK
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';

// Also OK
import { Box } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline';

Today I encountered this issue after installing @mui/icons-material to my Remix project.

My workaround was to use Icon Fonts. Hopefully the root issue will be fixed soon.

Today I encountered this issue after installing @mui/icons-material to my Remix project.

My workaround was to use Icon Fonts. Hopefully the root issue will be fixed soon.

The same here, thanks for sharing @williamrjribeiro

I had this issue and could not solve it with the above solutions.

Uninstalling and re-installing then rebuild worked for me:

npm uninstall @mui/icons-material @mui/material
npm install @mui/icons-material @mui/material

experice same issue..

still can find the root cause of the problem..

iam using vite v2.9.9 & "@mui/material": "^5.8.0",

my temp fix, make error in vite config, undo, recompile

my problem somewhere near : import Box from "@mui/material/Box"; i changed into : import {Box}from "@mui/material";

thanks to @geneshairzan, its kind of absurd, but causing error in vite.config.js and restarting the server after the crash actually solves my problem, I'm not sure why, i kept on getting - Uncaught TypeError: createTheme_default is not a function even after trying every solution in this issue

I'm running into the same issue...
I'm using Vite v3.1.6

I'm importing all of my Box components like the following but still receiving the error
import {Box} from "@mui/material";

the same here
I solved with
import { Box } from '@mui/material';
but with that I end up losing the layout style

All import should work if they are imported from top level: '@mui/material' for e.g.

For those who are having the problem with Vite, I solved it the same way (upgrading the imports to a higher level). If the problem continues, just delete the "node_modules" folder and then reinstall all dependencies.

Resolved it by changing import Box from "@mui/material/Box" to import {Box} from "@mui/material". By changing the imports, prettier has pushed the Box import below the CSSBaseline import. Can anyone explain why this error occurs?

I met this error when I was working with a Vite+React+TS application.
Wrapping technque as mentioned by divyam751 doesnt solve the problem.
Finally I overcame the error by editing vite.config.ts

export default defineConfig({
....
    optimizeDeps: {
        include: ['@mui/material/CssBaseline', '@mui/material/Box'],
        force: true
      },
...
})

Here, the both two lines are needed

This seems to be caused by node not getting the correct introduction when executing esm. You need to add type:module or exports:{import: "xx.mjs"} to each package.json of mui. If there is no these, the module will be introduced according to commonjs to load the entry file of the main field.
Why can this problem be fixed by introducing @mui/material instead? This is because the main entry file of @mui/material is ./node/index.js, and its content has es compatible code, so no error will be reported.

Adding --force to my vite command (vite --force --host) solved this for me following a @mui/* upgrade.

I just got this error again after I removed all the barrel files in a project.

This time around the fix was to change

import Box from '@mui/material/Box';

to

import { Box } from '@mui/material';

Is this something to do with treeshaking?

If you are using vite, just go and delete node_modules/@.vite/deps and run npm i. It fix my problem every time. It's some cache problem

I met this error when I was working with a Vite+React+TS application. Wrapping technque as mentioned by divyam751 doesnt solve the problem. Finally I overcame the error by editing vite.config.ts

export default defineConfig({
....
    optimizeDeps: {
        include: ['@mui/material/CssBaseline', '@mui/material/Box'],
        force: true
      },
...
})

Here, the both two lines are needed

i love you men you have no idea i have been trying to fix this stupid issue for almost 6 hours
thank you a lot <3

no need of other only do the

1. Uninstall MUI:
   npm uninstall @mui/material @emotion/react @emotion/styled
   npm uninstall @mui/icons-material @mui/system

2. After uninstalling, you can reinstall MUI by running:
   npm install @mui/material @emotion/react @emotion/styled
   npm install @mui/icons-material @mui/system

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.

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.

For me anything above didn't fixed the issue, its a vite bug which i have temporarily fixed by :

1. Go to node_modules/.vite/deps/your_chunk_fileName.js
2. Search createTheme_default() and instead of calling it just use reference like createTheme_default , save file
3. Restart the vite server by making an error in vite.config.ts & run.
   Although its not a permanent fix but it does the job as in production build i didn't have this error , its only in dev environment.