使用Ant Design Button时出现Cannot read properties of null(reading 'useContext')错误

错误信息 #

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (http://localhost:3000/main.19e2674394eb4e9a7d19.hot-update.js:36279:25)
    at InternalButton (http://localhost:3000/main.19e2674394eb4e9a7d19.hot-update.js:4513:42)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:21088:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:23659:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:25706:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10680:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10724:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10781:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30655:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29902:16)

复现代码 #

App.js #

import { Button } from 'antd';
import React from 'react';

function App() {
  return (
    <div>
      <h1>Teste</h1>
      <Button></Button>
    </div>
  );
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入Ant Design的CSS
import 'antd/dist/reset.css';

// 导入App组件
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

解决方案 #

• 版本兼容性检查：Ant Design 5.x要求React和React-DOM版本至少为18.0.0，打开package.json确认react、react-dom的版本是否符合要求，不符合则升级：

  npm install react@latest react-dom@latest
  

• 清理并重装依赖：删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件，然后重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 排查重复React实例：运行npm ls react查看项目中是否存在多个React包实例，若有冲突，可通过package.json中的resolutions字段强制统一版本（仅npm >= 8.3支持）：

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

• 给Button添加内容：尝试给Button组件添加文本内容，空组件可能触发某些渲染异常：

  <Button>测试按钮</Button>
  

内容的提问来源于stack exchange，提问作者Hugo Assis Brandao