ChakraUI v3.0.2中ChakraProvider的TypeScript属性错误解决

你遇到的问题是因为错误导入了底层的ChakraProvider组件。Chakra UI v3.x中，@chakra-ui/system包提供的是底层上下文Provider，它要求必须传入value属性（类型为SystemContext），而开发时常用的是@chakra-ui/react包导出的顶层ChakraProvider——这个封装好的Provider不需要手动传value，内部已处理上下文初始化。

如果你的导入语句是从@chakra-ui/system获取ChakraProvider，就会触发TS的必填属性报错；强行传undefined自然不符合SystemContext的类型要求，进而出现第二个错误。

• 修正导入路径：确保从@chakra-ui/react导入ChakraProvider，这是开发时的标准用法：

  // 正确导入
  import { ChakraProvider } from '@chakra-ui/react'
  

  删除任何从@chakra-ui/system导入ChakraProvider的代码。

• 验证依赖版本一致性：检查package.json中所有@chakra-ui/*相关依赖的版本是否都是3.0.2，版本不匹配可能导致类型定义冲突。若有不一致，重新安装依赖：

  npm install @chakra-ui/react@3.0.2 @chakra-ui/system@3.0.2
  

• 重启开发服务与TS语言服务：Vite缓存或TS语言服务缓存可能导致类型提示异常，重启开发服务器（Ctrl+C后重新执行npm run dev），或在VS Code中打开命令面板（Ctrl+Shift+P）执行TypeScript: Restart TS Server。

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)

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