从CRA迁移到Vite后生产环境MUI X Date Picker报错页面空白

1. 修正DatePicker的导入路径 #

当前使用的import { DatePicker } from '@mui/x-date-pickers/DatePicker'属于子路径导入，Vite生产构建的模块解析逻辑和Webpack存在差异，容易导致异常。改为官方推荐的顶层导入：

import { DatePicker } from '@mui/x-date-pickers';

2. 补全必要依赖 #

MUI X DatePicker依赖核心UI库和日期适配器，生产环境可能因依赖缺失报错，执行以下命令安装完整依赖：

npm install @mui/material @emotion/react @emotion/styled @mui/x-date-pickers dayjs

同时在项目根组件中全局配置日期适配器：

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      {/* 你的应用内容 */}
    </LocalizationProvider>
  );
}

3. 配置Vite构建优化 #

在vite.config.js中添加依赖优化配置，强制Vite预构建MUI相关模块，避免生产构建时的解析错误：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['@mui/x-date-pickers', '@mui/material', 'dayjs']
  },
  build: {
    commonjsOptions: {
      include: [/node_modules/]
    }
  }
});

4. 查看生产构建日志定位问题 #

如果以上方法无效，执行生产构建命令并查看详细日志，定位具体报错：

npm run build

日志中的模块缺失、语法错误等信息，能帮助精准排查问题。

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