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.

我已经创建了一个使用VitE和Reaction的项目。我创建了一个主题，将我的项目设置为从右到左。一切都很好，项目运行正常。

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.

我回滚我的更改(通过GIT检查)。但错误仍在显现。

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

我不明白发生了什么，为什么恢复更改后错误仍然存在？

优秀答案推荐

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

不使用ThemeProvider，只使用普通的MUI。我发现错误来自我导入CSSBaseline的app.tsx页面。

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

将CSSBaseline移到第一页上的框导入上方可解决此问题：

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

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:

我发现Vite缓存有问题，请尝试运行带有--force标志的开发命令来修复缓存问题：

yarn dev --force

or with npm

或与NPM合作

npm run dev --force

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

我也遇到了同样的问题，我通过删除node_MODULES/.vite/deps文件夹并重新启动服务器来修复它。

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

对我来说，这是因为进口了MUI Box组件：

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

而且它起作用了

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

我有同样的错误，所以我删除了所有的材料UI依赖并重新安装它们，它对我起作用了。

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

or

或

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

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.

主要错误是由于在访问组件之前没有获得主题提供程序的可用性，或者在其他情况下是由于VITE缓存问题。

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

要解决第一种情况，请将您的App组件包装在主题提供程序中。

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.

现在，如果出现第二个问题，请使用--force标志重新启动服务器。

For ex: npm run dev --force

例如：npm run dev--force

1. node_modules
   -> .vite (delete this file)


2. New install npm install vite


3. For yarn yarn add vite

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

我在我的项目中也遇到了同样的错误。我尝试了npm run dev--force删除缓存在VITE中的MUI版本(按照建议)...我检查了所有的导入(导入框来自...)要(从...导入{Box})...

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.

我把供应商放进了悬念中，它像预期的那样工作。

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"

I fixed it by changing the imports

我通过更改进口量修复了它

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

从‘@Effect/Reaction’导入{ThemeProvider}-

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

从‘@MUI/Material’+导入{ThemeProvider}

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.

对我来说，修复方法是确保ThemeProvider在Box之前导入。希望这对任何处于类似情况的人都有帮助。

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

As other people say, fixing the import in App.tsx fixed the issue, at least for me.

正如其他人所说，修复App.tsx中的导入解决了问题，至少对我来说是这样。

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

之前(这里我从@mui/Material获取ThemeProvider和createTheme)：

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

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

之后(从@MUI/材质/样式正确导入)：

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.

您可以看到来自Material UI的人员如何在他们的故障排除页面中导入此元素。

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

另外，导入的顺序也很重要，因此ThemeProvider和createTheme应该放在使用它们的任何其他元素之前。

Hope it helps!

希望它能帮上忙！

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

我认为这是在index.js中提供的，而不是在App.js中提供的。我们只在App.js中提供路由，而不是提供程序

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

更改App.jsx文件中的主题提供程序导入为我修复了它。

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

之前：从@Mui/Material导入{StyledEngineering Provider}；

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

现在：从@MUI/Material/Style导入{StyledEngineering Provider}；

Remove node_modules and install again, and restart your app

删除NODE_MODULES并重新安装，然后重新启动应用程序

Had the same bug.
Cause:

也有同样的问题。原因：

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

Solution:

解决方案：

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

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

我修复了它，删除了项目中的NODE_MODULES文件夹，然后使用NPM安装重新安装了它

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

删除.vite(NODE_MODULES内的构建缓存文件夹)并重新启动开发服务器

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

以上都没有修复我的错误，因为我更改了CssBaseline的导入成功了。我有过这样的经历：

import { CssBaseline } from '@mui/material'

and change it to:

并将其更改为：

import CssBaseline from '@mui/material/CssBaseline'

and that fix the problem

这就解决了问题

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