React+Antd3构建报错Select.Option无法作为JSX组件使用

该类型错误本质是**项目中存在多份版本不一致的React类型定义包（@types/react）**导致的类型不兼容：
从报错路径可以看到，项目依赖的react-slick包在自身的node_modules下嵌套安装了一份独立的@types/react，这份类型包的版本和你项目根目录安装的、对应React 16.9.9版本的@types/react版本不匹配。TypeScript做类型校验时，会判定两份不同路径下的React类型属于完全独立的类型体系，antd的Select.Option组件基于根目录React类型推导出来的React.ReactNode返回值，无法被赋值给react-slick下嵌套React类型要求的ReactNode类型，最终抛出组件不能作为JSX元素使用的错误。
这个问题和组件业务逻辑本身没有关系，是依赖类型版本冲突导致的。

按推荐优先级从高到低排列：

• 方案1：在项目tsconfig.json中配置路径别名，强制全项目所有位置引用的React类型都指向根目录下的版本，从根源消除多份类型冲突，配置参考：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react": ["./node_modules/react"],
      "@types/react": ["./node_modules/@types/react"],
      "react-dom": ["./node_modules/react-dom"],
      "@types/react-dom": ["./node_modules/@types/react-dom"]
    }
  }
}

配置完成后重启TS服务即可生效。

• 方案2：通过包管理器的强制版本统一能力，锁定全项目使用同一份@types/react版本：
  如果使用yarn作为包管理器，在package.json中添加resolutions字段：

  {
    "resolutions": {
      "@types/react": "16.9.9"
    }
  }
  

  如果使用npm 8.3及以上版本，在package.json中添加overrides字段：

  {
    "overrides": {
      "@types/react": "16.9.9"
    }
  }
  

  添加完成后删除node_modules文件夹和对应锁文件，重新执行npm install/yarn install安装依赖即可。
• 方案3：临时应急修复（不推荐长期使用）：在报错的Select.Option代码行上方添加// @ts-ignore注释，跳过TS对该行的类型校验。该方式仅能掩盖当前报错，没有解决多版本类型冲突的根源问题，项目中其他React组件后续仍可能出现同类类型错误。

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