使用Vite集成Chakra UI时出现Uncaught TypeError: sys is undefined错误

针对添加<ChakraProvider>后触发的Uncaught TypeError: sys is undefined错误，可尝试以下几种解决方案：

• 检查并修复依赖兼容性
  确保Chakra UI及其关联依赖版本与React、Vite适配。先确认已安装所有必需依赖：

  npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
  

  若已安装，可尝试锁定Chakra UI到稳定版本（如@chakra-ui/react@2.8.2），部分新版本可能与Vite的模块处理逻辑存在冲突。

• 调整Vite配置
  在vite.config.js中添加依赖优化规则，确保Chakra UI的依赖被正确解析：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      include: ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion']
    },
    ssr: {
      noExternal: ['@chakra-ui/react']
    }
  })
  

• 清除缓存并重装依赖
  执行以下步骤重置依赖环境：

  # 删除依赖目录和锁文件
  rm -rf node_modules package-lock.json
  # 重新安装依赖
  npm install
  # 重启Vite服务
  npm run dev
  

• 临时移除StrictMode测试
  暂时去掉<StrictMode>标签，StrictMode下的双重渲染可能触发Chakra UI内部未处理的逻辑问题，以此排查是否为StrictMode导致的错误。

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