React本地项目构建失败：'Component'无法作为JSX组件使用

• 统一Yarn Workspace内的@types依赖版本
  执行yarn list @types/react @types/react-dom，检查所有子包和根包的版本是否完全一致。如果存在版本差异，在根目录的package.json中添加对应配置强制锁定：

  // Yarn 1.x用resolutions
  "resolutions": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
  // Yarn 2+用overrides
  "overrides": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
  

• 修正tsconfig.json的JSX相关配置
  打开项目的tsconfig.json，确保compilerOptions包含以下正确配置：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // React 17+推荐，旧版本用"react"
      "lib": ["dom", "dom.iterable", "esnext"], // 必须包含dom库
      "moduleResolution": "node",
      "target": "es6"
    }
  }
  

  排查是否存在baseUrl或paths配置错误，导致@types/react的类型文件被错误解析。

• 彻底清理依赖并重装
  执行以下命令完全清除缓存和旧依赖，避免残留问题：

  yarn cache clean
  rm -rf node_modules
  rm -rf .yarn/cache # Yarn 2+需执行此步
  yarn install --force
  

  注意保留yarn.lock文件，不要误删（package-lock.json是npm的配置文件，Yarn环境下无需处理）。

• 去重重复依赖
  若workspace内存在多份@types/react安装，执行yarn dedupe @types/react自动合并重复依赖；Yarn 1.x版本需手动调整package.json确保依赖统一。

• 验证TypeScript版本兼容性
  执行tsc -v查看当前TS版本，确保其与@types/react版本匹配（例如@types/react@18需要TS 4.4及以上版本）。若版本过低，升级TS：

  yarn add typescript@^4.9.0 -D -W # -W参数表示在根包安装，全局作用于workspace
  

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