React项目使用Material UI组件触发useContext TypeError错误求助

问题详情 #

我尝试在React项目中使用Material UI的Button组件，之前在其他项目里安装完依赖就能正常使用，但现在不管用哪个MUI组件，都会触发组件内部的Cannot read properties of null (reading 'useContext')错误，肯定是操作哪里出了问题。

安装命令 #

使用的npm安装命令：
npm install @mui/material @emotion/react @emotion/styled

代码示例 #

index.js

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import App from './App'

ReactDOM.createRoot(document.querySelector("#root")).render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <App />
    </StyledEngineProvider>
  </React.StrictMode>
);

App.js

import { Button } from "@mui/material";
export default function App() {
    return (
     <div>
        <h1>Final Project</h1>
        <Button variant="contained">Hello World</Button>
        </div>
    );
}

控制台报错 #

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (react.development.js:1618:1)
    at Button (Button.js:223:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)

解决步骤 #

1. 检查React版本兼容性 #

MUI v5要求React和React DOM的版本至少为17.0.0。先查看当前版本：
npm list react react-dom
如果版本过低，执行升级命令：
npm install react@latest react-dom@latest

2. 排查重复React实例 #

项目中存在多个React实例会导致上下文无法正确共享，引发useContext错误：

• 新建test.js文件，内容：

const react = require('react');
console.log('React版本:', react.version);
console.log('React路径:', require.resolve('react'));

• 运行node test.js，如果输出多个路径或版本不一致，说明有重复安装。
• 解决：删除依赖锁文件和node_modules，重新安装：

rm -rf node_modules package-lock.json
npm install

3. 简化StyledEngineProvider的使用 #

StyledEngineProvider仅在需要自定义样式引擎或调整样式优先级时使用，暂时移除它测试：
修改index.js为：

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App'

ReactDOM.createRoot(document.querySelector("#root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

如果问题解决，再根据需求决定是否重新添加。

4. 添加ThemeProvider #

MUI组件依赖主题上下文，缺少ThemeProvider可能导致上下文获取失败。修改index.js：

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import App from './App'

const theme = createTheme();

ReactDOM.createRoot(document.querySelector("#root")).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

内容的提问来源于stack exchange，提问作者M.Jafar