ChakraUI报错：Cannot read properties of undefined (reading '_config')求助

API 探路者

2026-6-16

解决ChakraProvider报错：Cannot read properties of undefined (reading '_config')

问题重现

已安装最新版npm和Chakra UI，运行代码时触发以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading '_config')
报错栈指向：at ChakraProvider (provider.js:15:10)

代码结构如下：

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
import { ChakraProvider } from '@chakra-ui/react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <BrowserRouter>
    <ChakraProvider>
      <App />
    </ChakraProvider>
    </BrowserRouter>
  </React.StrictMode>
);

// App.jsx 
function App() {
    return (
        <h1>Hi</h1>
    );
}

解决思路

补全核心依赖：
仅安装@chakra-ui/react可能遗漏部分核心子依赖，执行以下命令确保所有必要包都安装：
```
npm install @chakra-ui/react @chakra-ui/system @chakra-ui/theme @emotion/react @emotion/styled framer-motion
```
清理缓存并重装依赖：
npm缓存或锁文件可能导致版本不兼容，执行以下步骤重置依赖：
```
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
```
（使用yarn的话替换为yarn cache clean和rm yarn.lock）
检查React版本兼容性：
Chakra UI最新版要求React 17及以上版本，执行npm list react react-dom查看当前版本，版本过低则升级：
```
npm install react@latest react-dom@latest
```
验证ChakraProvider的导入与使用：
确认导入语句为import { ChakraProvider } from '@chakra-ui/react'，避免从其他错误路径导入；同时确保没有在ChakraProvider外部使用Chakra UI组件（当前代码中App仅使用原生h1，此点无需调整）。
重启开发服务器：
简单的服务器重启有时能解决构建工具的临时缓存问题，关闭当前服务后重新执行npm run dev或对应启动命令。