MuiBreadcrumbs 和 Vite 警告：React.createElement：类型无效 - 需要一个字符串类/函数

Question

我有这个非常简单的代码：

import { Breadcrumbs, Typography } from "@mui/material";
import { Box } from '@mui/material';
import { useTheme } from '@mui/system';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import React from 'react';
import BreadcrumbsMenu from './components/BreadcrumbsMenu/BreadCrumbsMenu';

function App() {
  const theme = useTheme();

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <>
        <Box
          sx={{
            background: theme?.palette?.grayscale?.light,
            color: theme?.palette?.grayscale?.dark,
            minHeight: '100vh',
            display: 'flex',
            flexFlow: 'column',
          }}
        >
          <Box
            sx={{
              paddingTop: '20px',
              paddingLeft: '30px',
            }}
          >
            <BreadcrumbsMenu />
          </Box>
        </Box>
      </>
    </LocalizationProvider>
  );
}

export default App;

和

const BreadcrumbsMenu = () => {
  return (
      <Breadcrumbs>
        <Typography>Test</Typography>
      </Breadcrumbs>
  );
};

export default BreadcrumbsMenu;

虽然这渲染得很好，但我在控制台中收到此警告：

hook.js:608  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at MuiBreadcrumbs.tsx:8.

确实找不到任何有用的信息。

相关版本：

    "@mui/icons-material": "^5.15.14",
    "@mui/material": "^5.15.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

    "vite": "^6.0.3",

vite会议：

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: "build",
  },
  resolve: {
    mainFields: ["browser"],
  }
});

这个问题只有在我使用vite时才会出现。使用 CRE，我看不到此警告。

Answer 1

解决方案是删除

  resolve: {
    mainFields: ["browser"],
  }

Vite中的resolve.mainFields配置指定了Vite在导入模块时解析模块入口点的顺序。此设置对于确定在构建过程中使用哪个版本的包（例如 CommonJS、ESM 或特定于浏览器的构建）至关重要。

使用此功能可能会导致加载较旧的、不与 ESM 兼容的版本库。