React+TypeScript项目因多份React声明文件导致编译失败求助

嘿，我之前也踩过这个一模一样的坑！你遇到的"JSX element type 'Transition' is not a constructo..."报错，核心原因就是TypeScript在解析时找到了两份不同版本的React类型定义文件——大概率是react-transition-group的依赖里嵌套安装了和你项目根目录不一致的@types/react，导致类型不兼容，进而识别不出Transition组件的构造类型。

下面是我亲测有效的解决步骤：

1. 排查重复的类型依赖 #

先确认是不是真的存在重复的@types/react：

• 如果你用npm，运行：

  npm ls @types/react
  

• 如果你用yarn，运行：

  yarn list @types/react
  

看输出结果，如果出现多个版本的@types/react（比如根目录一个，node_modules/react-transition-group/node_modules里还有一个），那就是重复依赖的问题实锤了。

2. 清理并统一依赖版本 #

• 先彻底删除现有依赖和锁文件：

  # npm用户
  rm -rf node_modules package-lock.json
  # yarn用户
  rm -rf node_modules yarn.lock
  # Windows用户可以手动删除文件夹和对应锁文件
  

• 打开你的package.json，确保react、react-dom的版本和@types/react、@types/react-dom的版本严格匹配（比如react是18.2.0，那@types/react也得是18.x.x的版本），直接在package.json里指定固定版本，避免自动安装不兼容的嵌套版本。
• 重新安装依赖：

  npm install
  # 或者
  yarn install
  

3. 调整TypeScript配置（可选，避免后续同类问题） #

打开tsconfig.json，检查compilerOptions：

• 确保moduleResolution设置为"node"（或者"nodenext"，根据你的模块系统），让TypeScript按Node.js的规则解析模块路径；
• 不要在types数组里重复引入react相关类型，保持数组简洁，比如：

  "compilerOptions": {
    "moduleResolution": "node",
    "types": []
  }
  

4. 优化导入方式 #

试试把导入语句从：

import Transition from 'react-transition-group/Transition';

改成从包的根目录导入：

import { Transition } from 'react-transition-group';

这种方式更符合TypeScript的类型解析逻辑，能减少路径导致的类型识别问题。

做完这些步骤后，重新编译你的项目，应该就能解决这个报错了！

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