MuiBreadcrumbs在Vite中出现React.createElement无效类型警告求助

问题现象 #

使用@mui/material的Breadcrumbs组件，在Vite环境中页面可正常渲染，但控制台抛出警告：

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.

相同代码在Create React App（CRA）环境下无此警告。

相关代码与配置 #

App组件代码 #

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;

BreadcrumbsMenu组件代码 #

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

export default BreadcrumbsMenu;

依赖版本 #

{
  "@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与CRA的模块解析逻辑差异，导致MUI组件导入异常：

• BreadcrumbsMenu组件未显式导入Breadcrumbs和Typography，依赖父组件的导入传递。这种隐式导入在CRA的webpack配置下可正常工作，但Vite的ES模块解析会将未显式导入的组件视为无效对象，触发React类型校验警告。
• Vite配置中resolve.mainFields: ["browser"]干扰了MUI组件的正确解析，MUI包优先使用module/esm字段，而非browser字段。

解决方法 #

方法1：显式导入组件 #

在BreadcrumbsMenu组件中直接导入所需MUI组件，避免依赖父组件传递：

import { Breadcrumbs, Typography } from "@mui/material";

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

export default BreadcrumbsMenu;

方法2：调整Vite resolve配置 #

移除或修改mainFields配置，使用Vite默认解析逻辑：

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: "build",
  },
  resolve: {
    // 移除mainFields配置，使用默认值
  }
});

方法3：降级Vite版本 #

当前使用的v6.0.3为预发布版本，可能存在兼容性问题，建议降级到v5.x稳定版：

npm install vite@^5.2.0 --save-dev

验证步骤 #

1. 应用任一解决方法后，重启Vite开发服务器。
2. 检查控制台是否仍存在目标警告。
3. 确认页面渲染功能正常。

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