Box modules is broken

[howtorespawn]

Steps to reproduce

Link to live example: (required)

Steps:

1. Just use mui + Vite
2. On Vite Use react, javascrip + SWC
3. Install MUI
4. Use Drawer (or anything else that has box modules in it)
5. make two components. Use box of one component on second one.
   Like this
   src > components
6. box1.jsx
7. box2.jsx

import box 1 into box 2 and refresh the page manually (reenter url)

it gives off error in console that

Uncaught TypeError: undefined is not a function
<anonymous> Box.js:9

this line is giving problem
```const defaultTheme = createTheme();``
Check with both FireFox and Chromium

Current behavior

Box modules shows error in this line:
const defaultTheme = createTheme();
invalid function

Expected behavior

It should run

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: box mui

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.
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

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[slittlec]

I also get this error with Box and Vite:

const defaultTheme = createTheme();

Box.js:9
Uncaught TypeError: createTheme_default is not a function
at Box.js:9:22

[imakecodes]

I'm seeing the same error

[howtorespawn]

@slittlec @imakecodes if possible then create a new issue or share code here with help of https://codesandbox.io/ or just paste it here and ping mnajdova to reopen this issue post.
I lost my code so cant share it nor reproduce since my laptop is kinda broken to write the code correctly and with pace

for author

Edit:
I tried recreating it, not sure why but it seems like issue isnt with drawer + box but just single box modules

import { useState } from 'react'
import './App.css'
import * as React from 'react';
import Box from '@mui/material/Box';
import { ThemeProvider } from '@mui/material/styles';

function App() {
  return (
    <>
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
    </>
  )
}

export default App

Paste this into your app.jsx (vite + react with js)

the error is generated again due to https://mui.com/material-ui/react-box/#customization this code alone
Not sure why since i deleted

EDIT 2: upon further inspection the problem is with

import { Box } from '@mui/material'              //works
import Box from '@mui/material/Box';         // haha skill issue, fix theme or smt ~ prob the code

Found this right before starting to beat my head on wall

Solution for temporary

just replace the
import Box from '@mui/material/Box'
with
import { Box } from '@mui/material'
at top of your program for temporary solution. let developers do the rest of fixing for permanent solution

[imakecodes]

Hey folks, I solved this issue modifying the imports from import Box from '@mui/material/Box'; to `import { Box } from '@mui/material';

I'm using vite to serve, what are other infos important that could help to understand what is happening?

[Janpot]

same as #44055 (comment) I'd try if the new package structure of next MUI major fixes this issue.

if you feel like experimenting, there may also be a workaround to alias the imports to the esm folder such as in #35233 (comment)