React中NumberFormat/CopyToClipboard无法作为JSX组件使用的问题排查

核心原因 #

这个TS2786错误本质是React类型定义冲突，错误信息明确指出React.ReactNode来自不同的@types/react实例，同时存在TypeScript版本不匹配、ARM架构下依赖缓存异常的可能性。

具体修复步骤 #

1. 统一TypeScript版本 #

项目devDependencies中声明的typescript为^4.4.4，但本地环境使用的是4.9.4，版本差异会导致类型检查逻辑不一致。修改package.json中的devDependencies，将typescript版本锁定为本地使用的4.9.4：

"devDependencies": {
  // ...其他依赖
  "typescript": "^4.9.4"
}

2. 清理依赖并重装 #

ARM架构Mac下，node_modules可能存在架构相关的缓存或安装异常，执行以下命令彻底清理后重装：

rm -rf node_modules
rm package-lock.json yarn.lock
yarn install # 或 npm install

3. 强制统一React类型定义 #

通过依赖锁定机制，确保所有依赖使用的@types/react版本与项目声明的17.0.33一致：

• 若使用yarn，在package.json中添加：

  "resolutions": {
    "@types/react": "^17.0.33"
  }
  

• 若使用npm，在package.json中添加：

  "overrides": {
    "@types/react": "^17.0.33"
  }
  

添加后重新执行依赖安装命令。

4. 升级兼容的组件库版本 #

检查react-number-format和react-copy-to-clipboard的版本兼容性，升级到适配React 17的最新版本：

"dependencies": {
  // ...其他依赖
  "react-number-format": "^4.9.3",
  "react-copy-to-clipboard": "^5.1.0"
}

5. 校验tsconfig.json配置 #

确保tsconfig.json的compilerOptions中JSX解析配置正确：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 或 "react"，与vite插件配置匹配
    "moduleResolution": "node",
    // ...其他配置
  }
}

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