如何解决React+Vite+TS+MUI中的createTheme_default不是函数错误？

在用React、Vite、TypeScript和MUI开发应用时，反复遇到错误：「Uncaught TypeError: createTheme_default is not a function」，该错误与Material UI相关。删除node_modules/.vite/deps文件夹并重新安装依赖可临时解决，但问题最终仍会再次出现。

相关代码文件 #

package.json #

{
  "name": "app-clima",
  "homepage": "./",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "predeploy": "yarn build",
    "build": "tsc && vite build --base=/React-weather-app-apli-client/",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "@emotion/react": "11.11.1",
    "@emotion/styled": "11.11.0",
    "@mui/icons-material": "5.14.3",
    "@mui/material": "5.14.6",
    "@types/node": "20.5.4",
    "axios": "1.4.0",
    "gh-pages": "^6.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.2.0",
    "vite": "^4.4.5"
  }
}

main.tsx #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ThemeProvider } from "@emotion/react";
import { theme } from "./theme/theme.ts";
import { WeatherProvider } from "./context/WeatherProvider.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <WeatherProvider>
        <App />
      </WeatherProvider>
    </ThemeProvider>
  </React.StrictMode>
);

theme.ts #

import { PaletteColorOptions, createTheme, PaletteColor } from "@mui/material";

declare module "@mui/material/styles" {
  interface Theme {
    typography: {
      fontFamily: string;
    };
  }
  interface Palette {
    purple: PaletteColor;
    gray: PaletteColor;
    grayLight: PaletteColor;
  }
  interface PaletteOptions {
    purple: PaletteColorOptions
    gray: PaletteColorOptions
    grayLight: PaletteColorOptions
  }
}


export const theme = createTheme({
  typography: {
    fontFamily: ["Raleway"].join(","),
  },
  palette: {
    primary: {
      main: "#100E1D",
    },
    secondary: {
      main: "#1E213A",
    },
    purple: {
      main: "#3C47E9",
    },
    gray: {
      main: "#616475"
    },
    grayLight: {
      main: "#E7E7EB"
    }
  },
});

解决方案 #

• 统一MUI相关包版本：当前@mui/icons-material（5.14.3）和@mui/material（5.14.6）版本不一致，会导致模块解析冲突。将两者改为相同版本（例如都用5.14.6），然后执行yarn install或npm install重装依赖。

• 调整Vite优化依赖配置：在vite.config.ts中添加配置，强制预构建MUI相关模块，避免缓存异常：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      include: ['@mui/material', '@emotion/react', '@emotion/styled'],
      force: true // 强制每次构建重新预构建依赖，规避缓存问题
    }
  })
  

• 修正ThemeProvider导入：将ThemeProvider从@mui/material/styles导入，而非@emotion/react。混用不同库的ThemeProvider可能引发主题解析错误：
  修改main.tsx中的导入：

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

• 彻底清理缓存与依赖：执行以下命令彻底重置依赖和缓存：

  rm -rf node_modules yarn.lock package-lock.json
  rm -rf node_modules/.vite
  yarn install # 或 npm install
  yarn dev
  

• 排查类型定义问题：暂时移除theme.ts中的自定义Palette扩展，测试是否还会报错。如果问题消失，再逐步调整类型定义，排查是否是类型扩展导致的模块加载异常。

内容的提问来源于stack exchange，提问作者Diego Granados