使用基础MaterialUI组件时触发useContext读取null属性的TypeError

错误信息 #

错误
无法读取null的'useContext'属性
类型错误：无法读取null的'useContext'属性
在Object.useContext (http://localhost:3000/static/js/bundle.js:86566:25)
在useTheme (http://localhost:3000/static/js/bundle.js:51518:52).....

基础组件代码 #

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export function Mappbar() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

已尝试操作 #

• 执行npm dedup，试过相关线程中的所有解决方案，问题仍未解决。

解决方案 #

1. 确保组件被ThemeProvider包裹 #

MUI组件依赖ThemeProvider提供主题上下文，你的Mappbar必须放在ThemeProvider内部才能正常工作。修改入口或父组件代码：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Mappbar } from './Mappbar'; // 替换为你的组件实际路径

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Mappbar />
    </ThemeProvider>
  );
}

export default App;

2. 校验React与MUI版本兼容性 #

MUI v5要求React版本≥17.0.0，先查看当前版本：

npm list react @mui/material

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

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

3. 清理依赖并重新安装 #

删除缓存文件和依赖目录，重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 排查重复React实例 #

项目中存在多个React实例会导致上下文失效，执行以下命令检查：

npm list react

若出现多个React条目，在package.json中添加resolutions字段强制统一版本：

"resolutions": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

之后重新安装依赖。

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