Vite集成Chakra UI构建报错，寻求解决方案

核心问题根源 #

1. 依赖版本冲突：同时安装@chakra-ui/core（旧版核心包）和@chakra-ui/react（新版集成包）会触发内部模块冲突；React 18 与 Chakra UI 1.x 兼容性差，1.x 未适配 React 18 的新特性。
2. ES 语法转译缺失：Chakra UI 2.x 使用了 ES2020+ 语法（如可选链、空值合并），Vite 默认不对node_modules内的包进行转译，导致构建时出现Unexpected token错误。

分步修复方案 #

1. 清理并重新安装兼容依赖 #

方案一：使用 Chakra UI 2.x（推荐，适配 React 18）

• 卸载冲突旧包：

  npm uninstall @chakra-ui/core @chakra-ui/react
  

• 安装适配 React 18 的完整依赖：

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

  注：framer-motion是 Chakra UI 2.x 的必填依赖，用于动画效果；@emotion/*是样式引擎依赖。

方案二：使用 Chakra UI 1.x（需降级 React）

若必须保留旧版 Chakra，需将 React 降级到 17.x：

npm uninstall react react-dom
npm install react@^17.0.2 react-dom@^17.0.2
npm uninstall @chakra-ui/core
npm install @chakra-ui/react@1.8.2

2. Vite 配置关键调整 #

修改vite.config.js/vite.config.ts，添加 ES 版本兼容和依赖预构建配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // 优化依赖预构建，处理 Chakra UI 的 ES 语法
  optimizeDeps: {
    include: ['@chakra-ui/react', '@chakra-ui/system', '@chakra-ui/theme-tools'],
    esbuildOptions: {
      target: 'es2020' // 匹配 Chakra UI 使用的 ES 版本
    }
  },
  build: {
    target: 'es2020', // 确保构建输出兼容目标语法
    rollupOptions: {
      output: {
        manualChunks: undefined // 避免分包导致的模块引用错误
      }
    }
  }
})

3. 验证入口文件配置 #

确保项目入口文件（如main.jsx）正确包裹ChakraProvider：

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

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

4. 常见报错针对性处理 #

• 语法错误（旧版 Chakra + React 18）：直接降级 React 到 17.x 或升级 Chakra 到 2.x，二者必选其一。
• Unexpected token（Chakra 2.x）：确认 Vite 配置中target已设为es2020，若仍报错，检查是否有其他未转译的依赖，可在optimizeDeps.include中添加对应包名。

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