React Material UI createTheme_default is not a function

Question

I have created a project using vite and react. I create a theme to set my project into right to left. Everything was ok and the project was running properly.

const theme = createTheme({
  direction: 'rtl' , 
  typography: {
    "fontFamily": `"iransans"`,
    "fontSize": 11,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
   }
})
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin]
})


function App() {
  let history = useHistory();
  let contained = "Test The";
  return (
    <div className="App">
      <Router>
        <div>
          <Switch>
            <CacheProvider value={cacheRtl}>
              <ThemeProvider theme={theme}>
                <Route exact path="/applicant">
                  <Applicant />
                </Route>
              </ThemeProvider>
            </CacheProvider>
          </Switch>
        </div>
      </Router>
    </div>
  )
}
export default App

After I add a Slide component to my project. Suddenly my project stop working and the console is showing the

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

I rollback my changes(by git checking). but the error is still showing.

I can't understand what's going on Why is the error still there after reverting the changes?

Sidonia

whitch version o material ui you are using ? – Caresa

"@mui/material": "^5.10.14", – Sidonia

the error looks like it has no thing to do with the App component it says in Box.js – Caresa

could it be possible that in exchange to Vite's blazing fast compilation speed, you get a pretty poor dependencies handling...??? – Edmea

Sometimes the question include its answer. When error is exist after rolling back the git . it means that something occurs on git ignored files. the error specially in .vite file. – Sidonia

Answer 1

Not using ThemeProvider just plain MUI. I found that the error was coming from my app.tsx page where I import CSSBaseline.

Moving CSSBaseline above Box import on first page solve the issue:

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

Tham

Wow! Of all the solutions, this worked for me! – Bombacaceous

Put import Box from '@mui/material/Box'; after other mui components worked for me (e.g. after import Button from '@mui/material/Button';) – Machismo

Is there a reason for this behavior? – Larrainelarrie

Amazing that this was the solution – Courtund

vite sucks... never happens with webpack – Pummel

Answer 2

I had the same issue and I fixed it by removing the node_modules/.vite/deps folder and restarting the server.

Davinadavine

Thank pal, in a vitejs project its works fine. rm -rf node_modules/.vite/deps and then npm run dev – Transduction

This worked for me, so strange. Many thanks. But any explanation to why this happens? and why this worked? – Leucas

Answer 3

I've discovered there is a problem with the Vite cache, try running your development command with the --force flag to fix the cache issues:

yarn dev --force

or with npm

npm run dev --force

Hurryscurry

Answer 4

For me it was because of imports of MUI Box component:

import Box from '@mui/material/Box';
import { BoxProps } from '@mui/material/Box/Box';
import { useTheme } from '@mui/material/styles';

I changed it to

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

And it worked

Gal

This functioned perfectly for me. Thank you. – Moresque

Answer 5

I had the same error so I removed all material ui dependency and reinstalled them, it worked for me.

yarn remove @mui/material @emotion/react @emotion/styled 

or

npm uninstall @mui/material @emotion/react @emotion/styled 

Skeie

This was the solution for me ! +1 – Isoelectronic

Answer 6

The main error is due to not getting the availability of the theme provider before accessing the components, or, in other cases, a vite-cache issue.

To solve the first case, wrap you App component inside theme provider.

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

const theme = createTheme({
   direction: 'rtl',
   // other theme properties
});

function App() {
   return (
      <ThemeProvider theme={theme}>
          <div className="App">
             ...
          </div>
      </ThemeProvider>
   )
};

Now in case of second problem, restart your server with --force flag.

For ex: npm run dev --force

Ratite

Answer 7

Had the same bug. Cause:

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

Solution:

import createTheme from "@mui/material/styles/createTheme";

Nosh

The only proper and correct answer after searching a lot on google and stackoverflow – Glossy

Can you elaborate on why the first option causes this bug? – Oneness

What's the reason this bug is caused @SukhdevsinhZala , if you know? – Oneness

@workwork You need to know difference between these 2 import syntaxes. – Glossy

Answer 8

I fixed it by changing the imports

import {ThemeProvider} from '@emotion/react'-

import {ThemeProvider} from '@mui/material'+

Unsearchable

Answer 9

As other people say, 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!

Kongo

Answer 10

Non of the above fix my error, for me changing the import of CssBaseline did the trick. I had this import:

import { CssBaseline } from '@mui/material'

and change it to:

import CssBaseline from '@mui/material/CssBaseline'

and that fix the problem

Shakira

Answer 11

<CacheProvider value={cacheRtl}>
              <ThemeProvider theme={theme}>
                <Route exact path="/applicant">
                  <Applicant />
                </Route>
              </ThemeProvider>
            </CacheProvider>

I think this is given inside the index.js not in App.js We give Routes in App.js only not the Providers

Reproduce

Thank you for your solution. But this solution didn't solve my problem. – Sidonia

Need to shift your Provider code from here to some other file and then attached it here. – Reproduce

I did it. but the problem was not solved. I remove the matiral ui and install it again and them problem have been solved. – Sidonia

Then it might have a compatibility issue. Great your problem is solved. – Reproduce

Answer 12

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.

Viewing

Answer 13

I fixed it by simply downgrading the mui. This version works in my case.

"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.6",
"@mui/material": "^5.10.7"

Postlude

Answer 14

I had the same issue.

The fix for me was to make sure ThemeProvider was imported before Box. Hope this helps anyone in a similar situation.

Constituent

Answer 15

Changing the theme provider import in my App.jsx file fixed it for me.

Previously: import { StyledEngineProvider } from "@mui/material";

Now: import { StyledEngineProvider } from "@mui/material/styles";

Zelma

Answer 16

Your components should have a correact import path:

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

It's doesn't work

import { ThemeProvider, createTheme, styled } from '@mui/material';

Tile

Answer 17

I have reasons to believe that this problem originates in the @mui/icons-material package, if you follow this issue, which is still open as I'm writing this.

The issue has indeed been solved after I removed the @mui/icons-material dependency from my project.

You can still use material icons in your project by importing them through the Icon component instead of Material SVG icons.

More specifically, add this to your index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

And instead of this:

import AddIcon from '@mui/icons-material/Add';
    
<AddIcon />   

Use this:

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

<Icon>add</Icon>

Langelo

Answer 18

i had the same bug and this fixed it for me too:

import createTheme from "@mui/material/styles/createTheme";

Instead of this

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

Wicks

Answer 19

I'm using pnpm

pnpm run dev --force

running your development command with the --force flag to fix the cache issues.

Suburban

Answer 20

I solved it by add this to "vite.config.ts" file

optimizeDeps: {
   include: [
     "@mui/material/Box",
   ],
},

Inch

Answer 21

I have no <ThemeProvider />. What worked for me was:

Updating this

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

to

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

Komara

Answer 22

I solved it doing the following steps:

1. open node_modules/@mui/material/Box/Box.js
2. remove line 5: const defaultTheme = createTheme();
3. remove line 7: defaultTheme,
4. restart yarn dev --force

Cerous