Vite构建后预览报错：Uncaught TypeError: Cannot read properties of null (reading 'useContext')

常见原因及修复方案 #

• 版本兼容性排查
  确认@mui/material与react、react-dom版本兼容（MUI v5要求React 17+）。执行以下命令查看当前依赖版本：

  npm list @mui/material react react-dom
  

  若版本不匹配，升级到兼容版本：

  npm install @mui/material@latest react@latest react-dom@latest
  

• 确保MUI组件在React组件树内使用
  MUI组件依赖React上下文（如ThemeContext），若在React组件外部直接渲染组件，生产构建时会因无法获取上下文报错。必须将MUI组件放在React组件内部：
  错误示例：

  import Paper from '@mui/material/Paper';
  import { render } from 'react-dom';
  
  // 错误：组件外直接渲染
  const element = <Paper>测试内容</Paper>;
  render(element, document.getElementById('root'));
  

  正确示例：

  import Paper from '@mui/material/Paper';
  import { render } from 'react-dom';
  
  function App() {
    // 正确：React组件内部使用
    return <Paper>测试内容</Paper>;
  }
  
  render(<App />, document.getElementById('root'));
  

• 检查构建工具配置
  若使用Vite/Webpack，避免错误地将React相关依赖设为外部资源。比如Vite的vite.config.ts中，不要把react、react-dom加入external配置，否则生产构建会无法正常加载上下文：

  // 错误配置示例，需移除react/react-dom
  export default defineConfig({
    build: {
      rollupOptions: {
        external: ['react', 'react-dom']
      }
    }
  });
  

• 清除构建缓存
  缓存文件可能导致异常，执行以下命令清理后重新构建：

  rm -rf dist node_modules/.cache
  npm run build
  npm run preview
  

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