Issues with esbuild

[arpitdalal]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Look at this issue for more reference: https://github.com/mui/material-ui/issues/31140 The essence of it is that esbuild might not be building MUI dependencies properly so when accessing MUI functions like createTheme and useEnhancedEffect give an error in run time. The issue referenced above is more with Remix but since @jacobgad faced the same issue with Vite and that also uses esbuild, I am more leaned towards this issue is related to esbuild than Remix or Vite.

Expected behavior 🤔

No Uncaught TypeError: createTheme_default is not a function or Uncaught TypeError: useEnhancedEffect_default is not a function run-time errors

Steps to reproduce 🕹

Steps:

1. fork this codesandbox and use useEnhancedEffect from MUI instead of the custom one
2. go to ErrorBoundary or CatchBoundary by clicking the link
3. refreshing the page (the site in codesandbox not the codesandbox itself)
4. open the console t see the error

Context 🔦

Was just trying to figure out how to have a complete theme change experience with MUI and Remix but found this problem with esbuild (likely)

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: latest => 11.8.2
    @emotion/styled: latest => 11.8.1
    @mui/base:  5.0.0-alpha.72
    @mui/icons-material: latest => 5.5.1
    @mui/material: latest => 5.5.1
    @mui/private-theming:  5.4.4
    @mui/styled-engine:  5.4.4
    @mui/system:  5.5.1
    @mui/types:  7.1.3
    @mui/utils:  5.4.4
    @types/react: latest => 17.0.40
    react: latest => 17.0.2
    react-dom: latest => 17.0.2
    typescript: latest => 4.6.2

[arpitdalal]

cc: @mnajdova and @jacobgad

[infinia-yzl]

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.

[John0x]

Experiencing this as well with vite

[tombohub]

@arpitdalal did you try to remove icons from page: https://github.com/mui/material-ui/issues/32891 ?

[tombohub]

any solution so far?

[michaldudak]

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

[fullstackwebdev]

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"

[jmaldon1]

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

[geneshairzan]

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

[akshayitzme]

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

[jyoketsu]

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]

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

[Nkzn]

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

[williamrjribeiro]

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.

[ViniciusMRosa]

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

[jmsbrett]

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

[CRIMSON-CORP]

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

[MA-MacDonald]

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

[mnajdova]

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.

[juliomiguel]

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.

[kishore-s-15]

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?

[stoplion]

Same issue, the solutions here don't work for me. Importing Box breaks Vite build

[mnajdova]

I would recommend importing everything from the root, for e.g. from @mui/material. As far as I know there aren't issues like this. We are going to start tackling all blockers for supporting esbuild soon.

[pajazi]

Hi guys, don't know if this will help someone, but this worked for me, I deleted the node_modules folder and re-installed all the dependencies using npm The problem was solved

[mgomez-tubs]

To me this seems to be another issue related bugged vite cache (I guess it can hapen for many reasons) and today it happened to me for the second time. I fixed it by removing the node_modules/.vite/deps folder and restarting the server. I might have updated packages with the server open, so it might be partly my fault.

[Tasin5541]

I faced this problem once with vite. Try deleting the node_modules folder and reinstalling the libraries again. Also stop the vite server first. I use Trivago/prettier-plugin-sort-imports library to always keep mui imports high in the import lists.

// prettierrc
{
  .... 
  "importOrder": ["^[react*]", "^@mui/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderCaseInsensitive": true
  ..... 
}

[matiasnoriega]

Same issue from nowhere, I downgraded to 5.4.1 version and started working again. I'm not using themes or anything, it's almost a fresh vite proyect.

[chriscousinsdev]

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

Can confirm the same issue with Vite and MUI. This seemed to solve it To add to this, it seems as if a box with a nested drawer requires a CssBaseline otherwise the error reappears. Even with the CssBaseline moved to toplevel

[marwa17]

Hi guys, don't know if this will help someone, but this worked for me, I deleted the node_modules folder and re-installed all the dependencies using npm The problem was solved

Thank you,for me the bug is only fixed when I delete node_modules folder and reinstall everything again

[Brandons404]

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

This was my exact issue as well, and it's infuriating that this is the solution. Named imports significantly increase build size and I always prefer using direct imports for this reason. Thank you for giving a solution though, I'll have to use this until this issue is fixed.