Next.js14+Chakra UI v3构建报错：'ChakraSelect.Context'无法作为JSX组件

问题描述 #

执行pnpm run build（等效于next build）构建Next.js生产版本时，出现Chakra UI v3 Select组件的类型错误，具体报错信息如下：

> iprotect-cms@1.0.0 build
> next build

  ▲ Next.js 14.2.22
  - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully
   Skipping linting
   Checking validity of types  ...Failed to compile.

./src/components/ui/select.tsx:89:8
Type error: 'ChakraSelect.Context' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'string' is not assignable to type 'ReactElement<any, any>'.

  87 |   return (
  88 |     <ChakraSelect.ValueText {...rest} ref={ref}>
> 89 |       <ChakraSelect.Context>
     |        ^
  90 |         {(select) => {
  91 |           const items = select.selectedItems
  92 |           if (items.length === 0) return props.placeholder
Static worker exited with code: 1 and signal: null
   Checking validity of types  .%         

项目package.json配置如下：

{
  "name": "cms",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/next-js": "^2.4.2",
    "@chakra-ui/react": "^3.3.0",
    "@chakra-ui/styled-system": "^2.9.1",
    "@chakra-ui/system": "2.6.2",
    "@chakra-ui/theme-tools": "^2.2.6",
    "@emotion/cache": "^11.14.0",
    "@emotion/react": "^11.14.0",
    "@hookform/resolvers": "^3.10.0",
    "@tanstack/react-query": "^5.62.8",
    "@tanstack/react-query-devtools": "^5.62.8",
    "@tanstack/react-table": "^8.20.6",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^25.2.3",
    "@types/react-dom": "^18.0.6",
    "@uidotdev/usehooks": "^2.4.1",
    "apexcharts": "^3.35.2",
    "axios": "^1.7.9",
    "clsx": "^2.1.1",
    "cross-env": "^7.0.3",
    "next": "^14.2.5",
    "next-themes": "^0.4.4",
    "react": "18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-calendar": "^3.7.0",
    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "18.2.0",
    "react-dropzone": "^12.0.4",
    "react-hook-form": "^7.54.2",
    "react-icons": "^4.12.0",
    "react-is": "^18.0.0",
    "react-no-ssr": "^1.1.0",
    "sharp": "^0.33.5",
    "sonner": "^1.7.1",
    "stylis": "^4.1.1",
    "stylis-plugin-rtl": "2.0.2",
    "tailwind-merge": "^2.5.5",
    "typescript": "^5.7.2",
    "web-vitals": "^1.1.2",
    "zod": "^3.24.1",
    "zustand": "^5.0.2"
  },
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "build:prod": "NODE_ENV=production next build",
    "analyze": "ANALYZE=true next build",
    "start": "next start",
    "lint": "next lint",
    "predeploy": "pnpm run build",
    "deploy": "gh-pages -d build",
    "generate:theme": "npx @chakra-ui/cli typegen ./src/theme/index.ts"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@chakra-ui/cli": "^3.3.0",
    "@tanstack/eslint-plugin-query": "^5.62.1",
    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
    "@types/node": "^18.7.6",
    "@types/react": "18.2.0",
    "@types/react-calendar": "^3.5.2",
    "@types/react-table": "^7.7.12",
    "eslint": "^8.23.0",
    "eslint-config-next": "^12.2.5"
  },
  "resolutions": {
    "@types/react": "18.0.31",
    "@types/react-dom": "18.0.11"
  }
}

解决思路 #

• 修复React类型版本冲突：package.json中resolutions强制指定的@types/react@18.0.31、@types/react-dom@18.0.11与依赖声明的@types/react@18.2.0版本不一致，会导致类型推断错误。删除resolutions中的这两行，或统一版本为18.2.0，之后重新安装依赖：

  pnpm install
  

• 修正组件返回值类型：ChakraSelect.Context的子函数必须返回合法JSX元素，当前代码在items.length === 0时直接返回字符串props.placeholder，需将其包裹在<span>或Chakra的<Text>组件中：

  if (items.length === 0) return <span>{props.placeholder}</span>
  

• 统一Chakra UI核心包版本：当前使用的@chakra-ui/react@3.3.0与@chakra-ui/system@2.6.2、@chakra-ui/styled-system@2.9.1版本不匹配，Chakra UI v3要求核心包版本一致。将所有Chakra相关包升级到同版本（如最新v3稳定版），修改package.json后重新安装依赖：

  "@chakra-ui/next-js": "^3.3.0",
  "@chakra-ui/react": "^3.3.0",
  "@chakra-ui/styled-system": "^3.3.0",
  "@chakra-ui/system": "^3.3.0",
  "@chakra-ui/theme-tools": "^3.3.0",
  "@chakra-ui/cli": "^3.3.0"
  

• 重新生成主题类型定义：执行pnpm run generate:theme，确保类型文件与组件版本同步。
• 检查TypeScript配置：确认tsconfig.json中jsx设置为preserve或react-jsx，且开启strict模式，避免类型推断漏洞。

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