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.

[yurisldk]

For vite case you don't have to delete the node_modules it's enough to delete node_modules\.vite\deps cache folder.

[jayad23]

I had been getting the same error in my project... I tried npm run dev --force to delete MUI version cached in Vite (as suggested)... I checked all imports (import Box from ...) to be (import { Box } from...)...

But then, I realized that I might have placed wrongfully the Engine provider and Theme Provider. In my case, I was using suspense, and the Wrapper tags of the providers were wrapping the Component outside the Suspense tag. That was enabling a function before it already exists, hence causing that error.

I moved the Providers inside the Suspense, and it worked as expected.

[mgomez-tubs]

Somehow got the same error again, now while trying to preview a component that worked before in storybook. This time deleting the cache didn't work, but changing to named imports back and forth made it work again - this time, two imports from @mui/lab.

Tried restarting storybook, now everything works again (tried restarting before attempting this solution and was still getting teh error). So yeah.. looks like some vite caching thing.

[gogones]

I got the same error and I fixed it by changing the import order and putting the Box component at the top.

// From This:
import LocalTable from "./Table/LocalTable";
import {Box, Container} from "@mui/material";

// To This:
import {Box, Container} from "@mui/material";
import LocalTable from "./Table/LocalTable";

[prasanjeevi]

I got the same error with @mui/material=5.11.12 on vite app

// Before: Not worked
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';

// After: Worked
import Card from '@mui/material/Card';
import Box from '@mui/material/Box';

[aslaugsollilja]

Not sure if this is related but I feel like this is a similar issue.. I am using Vite/esbuild and importing a Datepicker in a child component

import { yupResolver } from '@hookform/resolvers/yup';
import { Drawer, Stack, TextField, Typography } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs, { Dayjs } from 'dayjs';
import { FC, useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import * as yup from 'yup';

the weird thing is that it works locally, but when I build I get this error

TypeError: mF is not a function
    at FPe (usePickerViews.js:87:3)
    at qoe (usePicker.js:26:31)
    at zRe (useDesktopPicker.js:57:7)
    at DesktopDatePicker.js:49:7
    at vB (react-dom.production.min.js:167:137)
    at oj (react-dom.production.min.js:193:57)
    at Gie (react-dom.production.min.js:294:275)
    at Uie (react-dom.production.min.js:280:389)
    at Ewe (react-dom.production.min.js:280:320)
    at W6 (react-dom.production.min.js:280:180)

all help is really appreciated! My package.json file

 "dependencies": {
     ....
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@hookform/resolvers": "^2.9.10",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.4.1",
    "@mui/x-data-grid": "^5.17.10",
    "@mui/x-date-pickers": "^6.0.1",
    "dayjs": "^1.11.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.5",
    "react-router-dom": "^6.4.0",
    "yup": "^0.32.11"
  },

[aslaugsollilja]

Actually, it looks like this comment https://github.com/vitejs/vite/issues/12423#issuecomment-1475259451 fixed my issue 😍 thank you @jbsouvestre

[crummy]

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

I tried this in a few places but it didn't fix it. I fixed it everywhere with this search and replace in IntelliJ:

• Search for: import (\w+) from '@mui/material/\w+';
• Replace with: import { $1 } from "@mui/material";

[alexanderkjones]

Same issue here with Vite + React

Can confirm changing the import order of CSSBaseline in App.tsx solved the issue in my case.

From :

import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";

To :

import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";

[andriel300]

Same issue here with Vite + React

To fix my issue problem "createTheme_default is not a function" error,

I updated my imports to use the correct syntax for importing from the Material-UI library.

Specifically, I changed the import statement for

Before

CssBaseline from import { CssBaseline, ThemeProvider } from "@mui/material"

After

import { ThemeProvider } from "@mui/material" import CssBaseline from "@mui/material/CssBaseline".

This allowed me to correctly import CssBaseline as a standalone component, and then use it in conjunction with ThemeProvider to create a custom theme for my app. With this update, the createTheme function was able to be used without any issues.

[rawasaditya]

@andriel300 Thanks, solution works

[gabo71096]

I answered this on StackOverflow.

Fixing the import in App.tsx fixed the issue, at least for me.

Before (Here I get ThemeProvider and createTheme from @mui/material):

import { Container, CssBaseline, ThemeProvider, createTheme } from "@mui/material";

After (Correctly imported from @mui/material/styles):

import { ThemeProvider, createTheme } from "@mui/material/styles"
import { Container, CssBaseline } from "@mui/material";

You can see how the people from Material UI import this element in their Troubleshooting page.

Another thing, the order of imports also matters, so ThemeProvider and createTheme should be before any other element that uses them.

Hope it helps!

[yanyao2333]

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.

Same issue when I use esbuild today. I tried this, and it worked.

Then I tried to use the icons-material again. So I tried again and again...

At last, I use import {Send as SendIcon} from "@mui/icons-material" instead of import SendIcon from '@mui/icons-material/Send'. I dont know why, but it worked!

Hope this can help help you! : )

[olgayavnel]

It happened to my project after I have installed mui icons. Deleting and reinstalling node_modules and then starting the project again helped.

[Methuselah96]

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

[hmd-ai]

I'm seeing a similar error when importing an icon from @mui/icons-material:

Uncaught TypeError: Cannot read properties of null (reading 'createSvgIcon'))

The issue seems to be as follows:

• @mui/material/utils doesn't have a default export
• @mui/material/utils doesn't define __esModule
• esbuild seems to ignore named exports (createSvgIcon)
• esbuild just sets the export to null in the final output

Here's a sample of what esbuild outputs for @mui/material/utils

function ge7(e24, t27) {
  function n15(n16, r23) {
    return y13(be8, t17({ "data-testid": `${t27}Icon`, ref: r23 }, n16, { children: e24 }));
  }
  return n15.muiName = be8.muiName, X2(J2(n15));
}
be8.muiName = "SvgIcon";
var ye9 = { configure: (e24) => {
  re5.configure(e24);
} };
var esm_default35 = null;

The function ge7 is createSvgIcon and it is not exported, instead esm_default35 is set to null.

Here's a sample output of the Menu Icon which throws the error:

var a21 = {}, u22 = {};
!function(e24) {
  Object.defineProperty(e24, "__esModule", { value: true }), Object.defineProperty(e24, "default", { enumerable: true, get: function() {
    return t27.createSvgIcon;
  } });
  var t27 = esm_default35;
}(u22);
var m24 = e23;

[Memnoc]

Nothing I could find online worked for me. Finally, I have found this post and it solved my issue entirely.

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: [
      '@mui/icons-material',
      '@mui/material',
      '@emotion/react',
      '@emotion/styled',
    ],
  },
});

I have deleted .node-modules I don't know how many times, then started the server again, and I have don the same this time too, so maybe it helps.

[KarthikMgk]

This one is an irritating bug. It happens out of the blue. I'm using vite

Steps I tried that worked

1. Deleting node_modules/ and running npm i
2. uninstalling mui-core and mui-icons and reinstalling
3. Even though I don't use CssBaseline actively, I still added it to the top of my App.jsx and it helped
4. Deleting the entire project and starting afresh

[matija94]

Was able to fix this by using named import.

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

Otherwise, issue started happening when i've installed @mui/icons-material to the project. The Box component was previously imported as

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

I am the current latest vite version 5.0.2

[alaykabir]

Same issue here with Vite + React The Most Irritating one.

What worked for me was Changing the CssBaseline to a standalone Component and moving to the main.jsx

From : import {CssBaseline} from "@mui/material/CssBaseline"; To : import CssBaseline from "@mui/material/CssBaseline";