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?

the error looks like it has no thing to do with the **App component** it says in `Box.js` — monim, Nov 23 '22 at 06:34
could it be possible that in exchange to Vite's blazing fast compilation speed, you get a pretty poor dependencies handling...??? — Nir O., Apr 18 '23 at 11:45

score 13 · Answer 1 · answered Apr 05 '23 at 19:26

13

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

answered Apr 05 '23 at 19:26

user1028468

141
1
3

Wow! Of all the solutions, this worked for me! – anjandash Apr 20 '23 at 17:56
Put `import Box from '@mui/material/Box';` after other mui components worked for me (e.g. after `import Button from '@mui/material/Button';`) – fl_ May 27 '23 at 15:40

score 11 · Answer 2 · answered Dec 25 '22 at 22:08

11

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

answered Dec 25 '22 at 22:08

Warwick

181
9

This solution was helpful, thanks. – kacper3671 Jan 11 '23 at 09:41
This solution doesn't work for me – Jabal Logian Aug 02 '23 at 03:53

score 6 · Answer 3 · answered Mar 11 '23 at 04:56

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

score 4 · Answer 4 · edited Feb 09 '23 at 01:39

4

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

edited Feb 09 '23 at 01:39

Blastfurnace

18,411
56
55
70

answered Feb 08 '23 at 16:34

Lahiru

47
4

score 4 · Answer 5 · answered Feb 19 '23 at 13:49

4

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

answered Feb 19 '23 at 13:49

Dinuka Dilshan

552
6
12

1

This worked for me without any issue. Thanks – Babbaranish Apr 10 '23 at 09:41
now getting Outdated Optimize Dep – Nir O. Apr 18 '23 at 11:43

score 3 · Answer 6 · answered Apr 14 '23 at 16:45

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

score 1 · Answer 7 · answered Feb 07 '23 at 21:07

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.

score 1 · Answer 8 · answered Mar 09 '23 at 12:29

1

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"

answered Mar 09 '23 at 12:29

Andris Spalvis

11
1

score 1 · Answer 9 · answered Mar 28 '23 at 00:54

1

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.

answered Mar 28 '23 at 00:54

Josh

535
6
14

score 1 · Answer 10 · edited May 19 '23 at 09:53

1

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

edited May 19 '23 at 09:53

Liam

27,717
28
128
190

answered May 18 '23 at 16:17

Егор Дубовик

11
2

score 1 · Answer 11 · answered Jul 11 '23 at 22:55

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!

score 0 · Answer 12 · answered Nov 23 '22 at 06:42

0

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

answered Nov 23 '22 at 06:42

Shilpe Saxena

219
2
8

Thank you for your solution. But this solution didn't solve my problem. – Mehdi Nov 23 '22 at 11:07
Need to shift your Provider code from here to some other file and then attached it here. – Shilpe Saxena Nov 23 '22 at 11:56
I did it. but the problem was not solved. I remove the matiral ui and install it again and them problem have been solved. – Mehdi Nov 23 '22 at 17:19
Then it might have a compatibility issue. Great your problem is solved. – Shilpe Saxena Nov 24 '22 at 02:55

lanworm · Answer 13 · 2023-03-16T06:32:09.240

0

I fixed it by changing the imports

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

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

edited Mar 16 '23 at 06:32

answered Mar 16 '23 at 06:30

lanworm

1
1

score 0 · Answer 14 · answered Apr 12 '23 at 19:13

0

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

answered Apr 12 '23 at 19:13

Self_programmed

51
1
2

score 0 · Answer 15 · answered Jul 18 '23 at 08:57

0

Remove node_modules and install again, and restart your app

answered Jul 18 '23 at 08:57

Valentyn Dmytryuk

1

score 0 · Answer 16 · answered Jul 30 '23 at 13:11

0

Had the same bug. Cause:

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

Solution:

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

answered Jul 30 '23 at 13:11

Amos

91
3

score 0 · Answer 17 · answered Aug 07 '23 at 07:36

0

I Fixed it by removing the node_modules folder my the project and then reinstalled it by using npm install

answered Aug 07 '23 at 07:36

Gaurav

1

score 0 · Answer 18 · answered Aug 21 '23 at 12:07

0

delete .vite (build cache folder inside node_modules) and restart the dev server

answered Aug 21 '23 at 12:07

Alexander

79
5

score -4 · Answer 19 · edited Jun 07 '23 at 09:39

-4

I solved it doing the following steps:

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

edited Jun 07 '23 at 09:39

Asplund

2,254
1
8
19

answered Feb 17 '23 at 01:45

Felipe Ignacio

3
1

React Material UI createTheme_default is not a function

19 Answers19

Linked