React Material UI VITE - 主题问题 - createTheme_default 不是函数

Question

在我们的前端 React - Material UI 应用程序中，我们目前遇到的问题是，有时当我们切换分支时，我们会在浏览器控制台日志中收到错误：

createTheme_default is not a function

。 在此输入图片描述

该块如下：

// node_modules/@mui/material/Box/Box.js
init_identifier();

// node_modules/@mui/material/Box/boxClasses.js
init_generateUtilityClasses();
var boxClasses = generateUtilityClasses("MuiBox", ["root"]);
var boxClasses_default = boxClasses;

// node_modules/@mui/material/Box/Box.js
var defaultTheme = createTheme_default();
var Box = createBox({
  themeId: identifier_default,
  defaultTheme,
  defaultClassName: boxClasses_default.root,
  generateClassName: ClassNameGenerator_default.generate
});

奇怪的是，没有任何地方显示发生此错误的位置。

我在网上看到了一些帖子，但实际上我找不到与此问题相关的任何修复。

我们的

theme.ts

看起来像这样：

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

declare module "@mui/material/styles" {
  interface Palette {
    blue: ColorPartial;
    red: ColorPartial;
    yellow: ColorPartial;
    teal: ColorPartial;
    neutral: ColorPartial;
  }
  interface PaletteOptions {
    blue: ColorPartial;
    red: ColorPartial;
    yellow: ColorPartial;
    teal: ColorPartial;
    neutral: ColorPartial;
  }
}

declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    blue: true;
    red: true;
    yellow: true;
    teal: true;
    neutral: true;
    cyan: true;
  }
}

declare module "@mui/material/TextField" {
  interface TextFieldPropsColorOverrides {
    blue: true;
    red: true;
    yellow: true;
    teal: true;
    neutral: true;
    cyan: true;
  }
}

declare module "@mui/material/ToggleButton" {
  interface ToggleButtonPropsColorOverrides {
    blue: true;
    red: true;
    yellow: true;
    teal: true;
    neutral: true;
    cyan: true;
  }
}

declare module "@mui/material/SvgIcon" {
  interface SvgIconPropsColorOverrides {
    blue: true;
    red: true;
    yellow: true;
    teal: true;
  }
}

const palette = {
  primary: {
    50: "#E0FCFF",
    100: "#BEF8FD",
    200: "#87EAF2",
    300: "#54D1DB",
    400: "#38BEC9",
    500: "#2CB1BC",
    600: "#14919B",
    700: "#0E7C86",
    800: "#0A6C74",
    900: "#044E54",
    main: "#2CB1BC",
  },
  neutral: {
    50: "#FAF9F7",
    100: "#E8E6E1",
    200: "#D3CEC4",
    300: "#B8B2A7",
    400: "#A39E93",
    500: "#857F72",
    600: "#625D52",
    700: "#504A40",
    800: "#423D33",
    900: "#27241D",
    main: "#857F72",
  },
  blue: {
    50: "#DCEEF8",
    100: "#B6E0FE",
    200: "#84C5F4",
    300: "#62B0E8",
    400: "#4098D7",
    500: "#2680C2",
    600: "#186FAF",
    700: "#0F609B",
    800: "#0A558C",
    900: "#003E6B",
    main: "#2680C2",
  },
  red: {
    50: "#FFEEEE",
    100: "#FACDCD",
    200: "#F29B9B",
    300: "#E66A6A",
    400: "#D64545",
    500: "#BA2525",
    600: "#A61B1B",
    700: "#911111",
    800: "#780A0A",
    900: "#610404",
    main: "#BA2525",
  },
  yellow: {
    50: "#FFFAEB",
    100: "#FCEFC7",
    200: "#F8E3A3",
    300: "#F9DA8B",
    400: "#F7D070",
    500: "#E9B949",
    600: "#C99A2E",
    700: "#A27C1A",
    800: "#7C5E10",
    900: "#513C06",
    main: "#E9B949",
  },
  teal: {
    50: "#EFFCF6",
    100: "#C6F7E2",
    200: "#8EEDC7",
    300: "#65D6AD",
    400: "#3EBD93",
    500: "#27AB83",
    600: "#199473",
    700: "#147D64",
    800: "#0C6B58",
    900: "#014D40",
    main: "#27AB83",
  },
  text: {
    primary: "#27241D",
    secondary: "#857F72",
  },
  background: {
    default: "#FAF9F7",
  },
};

const theme = createTheme({
  palette: palette,
  typography: {
    fontFamily: "Roboto, Arial, sans-serif",
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: "5px",
        },
        contained: {
          backgroundColor: palette.primary[500],
          color: "#FFFFFF",
          "&:hover": {
            backgroundColor: palette.primary[600],
          },
        },
        outlined: {
          color: palette.text.primary,
          border: `1px solid ${palette.neutral[200]}`,
          backgroundColor: "transparent",
          "&:hover": {
            backgroundColor: palette.neutral[200],
          },
        },
        text: {
          color: palette.text.primary,
          backgroundColor: "transparent",
          "&:hover": {
            backgroundColor: palette.neutral[100],
          },
        },
      },
      variants: [
        {
          props: { variant: "contained", color: "neutral" },
          style: {
            backgroundColor: palette.neutral[100],
            color: palette.text.primary,
            "&:hover": {
              backgroundColor: palette.neutral[200],
            },
          },
        },
        {
          props: { variant: "contained", color: "yellow" },
          style: {
            backgroundColor: palette.yellow[500],
            color: "#FFF",
            "&:hover": {
              backgroundColor: palette.yellow[600],
            },
          },
        },
        {
          props: { variant: "contained", color: "blue" },
          style: {
            backgroundColor: palette.blue[500],
            color: "#FFF",
            "&:hover": {
              backgroundColor: palette.blue[600],
            },
          },
        },
        {
          props: { variant: "contained", color: "teal" },
          style: {
            backgroundColor: palette.teal[700],
            color: "#FFF",
            "&:hover": {
              backgroundColor: palette.teal[800],
            },
          },
        },
        {
          props: { variant: "outlined", color: "yellow" },
          style: {
            borderColor: palette.yellow[500],
            color: palette.yellow[500],
            "&:hover": {
              backgroundColor: palette.yellow[50],
              borderColor: palette.yellow[600],
            },
          },
        },
        {
          props: { variant: "outlined", color: "blue" },
          style: {
            borderColor: palette.blue[500],
            color: palette.blue[500],
            "&:hover": {
              backgroundColor: palette.blue[50],
              borderColor: palette.blue[600],
            },
          },
        },
        {
          props: { variant: "outlined", color: "teal" },
          style: {
            borderColor: palette.teal[500],
            color: palette.teal[500],
            "&:hover": {
              backgroundColor: palette.teal[50],
              borderColor: palette.teal[600],
            },
          },
        },
        {
          props: { variant: "outlined", color: "neutral" },
          style: {
            color: palette.text.primary,
            border: `1px solid ${palette.neutral[200]}`,
            backgroundColor: "transparent",
            "&:hover": {
              backgroundColor: palette.neutral[100],
            },
          },
        },
      ],
    },
    MuiSvgIcon: {
      variants: [
        {
          props: { color: "yellow" },
          style: {
            color: palette.yellow[500],
          },
        },
        {
          props: { color: "blue" },
          style: {
            color: palette.blue[500],
          },
        },
        {
          props: { color: "teal" },
          style: {
            color: palette.teal[500],
          },
        },
      ],
    },
    MuiTextField: {
      variants: [
        {
          props: { variant: "outlined" },
          style: {
            "& .MuiOutlinedInput-root": {
              "& fieldset": {
                borderColor: palette.neutral[200],
              },
              "&:hover fieldset": {
                borderColor: palette.neutral[300],
              },
              "&.Mui-focused fieldset": {
                borderColor: palette.neutral[500],
              },
            },
            "& .MuiInputLabel-root": {
              color: palette.neutral[400],
              "&.Mui-focused": {
                color: palette.neutral[700],
              },
            },
          },
        },
      ],
    },
  },
});
export default theme;

并且它与ThemeProvider一起使用。 我们的

main.tsx

:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme";

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

我可以通过执行以下操作来修复：

rm -rf node_modules package-lock.json
rm -rf node_modules/.vite
npm cache clean --force
npm install

但是在创建分支并可能检查回该分支之后 - 错误又回来了。

Answer 1

我希望还不算晚，因为我也有类似的情况。从字面上看是同样的情况。我认为发生的情况是，在编译代码/React 组件中导入“Box”的代码时，vite 遇到了某种问题。我为解决这个问题所做的只是遵循 this，一些 reddit 讨论。

只需在从 MUI 包导入所有组件后立即设置 MUI Box 组件导入即可。下面是示例代码

import { useReducer } from "react";
import { useNavigate } from "react-router-dom";

//* MUI

import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import AddIcon from "@mui/icons-material/Add";
import Box from "@mui/material/Box"; //* Literally just add it here after all the imports of MUI packages in your code

//* Components
import TaskTableData from "@/components/ui/TaskTableData";
import FilterActions from "@/components/ui/FilterActions";

//* Types
import { FilterKeysAndValues, FilterInterface, StateTypes } from "./types";

//* Routes
import { paths } from "@/routes/MainRoute";

export default function Dashboard() {
  const [state, updateState] = useReducer(
    (prev: any, next: any): StateTypes => {
      return { ...prev, ...next };
    },
    {
      anchorEl: null,
      anchorElFilterPriority: null,
      anchorElFilterStatus: null,
      filters: {
        status: [],
        priority: [],
      },
      allFilters: [],
    }
  );

  const navigate = useNavigate();

  const {
    anchorEl,
    anchorElFilterPriority,
    anchorElFilterStatus,
    filters,
    allFilters,
  } = state;
  //* Filter menu
  const open = Boolean(anchorEl);

  //* Priority Filter menu
  const openPriorityFiler = Boolean(anchorElFilterPriority);

  //* Statue Filter menu
  const openStatusFilter = Boolean(anchorElFilterStatus);
  // console.log("filters:", filters);

  const removeFilterInList = (data: FilterKeysAndValues) => {
    const filterFiltersState = filters?.[
      data?.filterFrom as keyof FilterInterface
    ].filter((d: FilterKeysAndValues) => !d.keys.includes(data.keys));

    const newFilterAllFilters = allFilters.filter(
      (d: FilterKeysAndValues) => !d.keys.includes(data.keys)
    );

    updateState({
      filters: {
        ...filters,
        [data.filterFrom as keyof FilterInterface]: filterFiltersState,
      },
      allFilters: newFilterAllFilters,
    });
  };

  return (
    <>
      {/* Filter Menu  */}

      {/* Filter controls  */}
      <Paper sx={{ p: 1 }}>
        <Box
          component="div"
          sx={{
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <Box component="div" sx={{ display: "flex", alignItems: "center" }}>
            <FilterActions
              updateState={updateState}
              anchorEl={anchorEl}
              open={open}
              anchorElFilterPriority={anchorElFilterPriority}
              openPriorityFiler={openPriorityFiler}
              anchorElFilterStatus={anchorElFilterStatus}
              openStatusFilter={openStatusFilter}
              filterStatusList={filters?.status}
              filterPriorityList={filters?.priority}
              allFilterList={allFilters}
            />
            {(allFilters || []).map((d: FilterKeysAndValues, i: number) => (
              <Chip
                color={d.filterFrom === "priority" ? "primary" : "success"}
                key={i}
                label={d.values}
                variant="outlined"
                onDelete={() => removeFilterInList(d)}
              />
            ))}
          </Box>

          <Button
            color="primary"
            variant="contained"
            startIcon={<AddIcon />}
            onClick={() => navigate(paths.add_task)}
          >
            New task
          </Button>
        </Box>
      </Paper>
      <br />
      {/* Table datas  */}
      <Paper elevation={3} sx={{ lineHeight: "60px", p: 2 }}>
        <TaskTableData />
      </Paper>
    </>
  );
}

我知道这个答案很奇怪，但这个解决方案解决了我类似的问题。