pnpm工作区下'ContainerA'无法作为JSX组件使用的解决方法

错误本质 #

核心是React类型定义版本冲突：项目中存在多份不同版本的@types/react（或React核心包），导致ReactNode等基础类型来自不同的模块路径，TypeScript无法识别为同一类型，进而抛出兼容性错误。

针对pnpm环境的解决方案 #

1. 强制统一React及类型包版本 #

在项目根目录的package.json中添加pnpm.overrides字段，强制所有依赖使用同一版本的React和对应的类型包：

{
  "pnpm": {
    "overrides": {
      "react": "^18.2.0",
      "@types/react": "^18.2.21",
      "@types/react-dom": "^18.2.7"
    }
  }
}

注意：版本号要和你项目主依赖的版本保持一致，比如报错信息里的@types/react@18.2.21，就统一用该版本。

2. 清理依赖并重新安装 #

执行以下命令彻底清理旧依赖，确保版本覆盖规则生效：

pnpm store prune
rm -rf node_modules
rm pnpm-lock.yaml
pnpm install

3. 验证版本统一情况 #

执行命令查看React相关包的依赖树，确认所有依赖都指向同一版本：

pnpm ls react
pnpm ls @types/react

如果输出中所有条目都显示同一个版本号，说明配置生效。

4. 排查组件自身类型问题（可选） #

若以上步骤无效，检查ContainerA和ContainerB的实现：

• 确保ContainerB的render方法返回标准的ReactNode类型，没有自定义的冲突类型
• 确认组件导出方式正确，避免直接导出组件类（应导出可直接作为JSX使用的组件类型）

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