React 18搭配bit.dev执行`bit tag`失败的问题求助

遇到的两个核心错误 #

错误1：找不到react-dom/client模块 #

The following errors were found while running the build pipeline
Failed task 1: "teambit.defender/tester:TestComponents" of env "teambit.react/react"
component: cagosto48.select-boxes/ui/wizard-select@0.0.1
Error: Cannot find module 'react-dom/client' from 'node_modules/.pnpm/registry.npmjs.org+@testing-library+react@13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/@testing-library/react/dist/pure.js'

Require stack:
  node_modules/.pnpm/registry.npmjs.org+@testing-library+react@13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/@testing-library/react/dist/pure.js
  node_modules/.pnpm/registry.npmjs.org+@testing-library+react@13.3.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/@testing-library/react/dist/index.js
  cagosto48.select-boxes_ui_wizard-select@0.0.1/dist/wizard-select.spec.js

错误2：找不到@emotion/react模块 #

Failed task 2: "teambit.preview/preview:GeneratePreview" of env "teambit.react/react"
component: cagosto48.select-boxes/ui/wizard-select@0.0.1
ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/react' in '/Users/carlosagosto/Library/Caches/Bit/capsules/b89c12b2cff6d117ea54ad5513a8d8d3d0194e16/node_modules/.pnpm/registry.npmjs.org+@mui+styled-engine@5.10.3_react@17.0.2/node_modules/@mui/styled-engine'

问题根源 #

• 错误1：组件仍在使用默认的teambit.react/react环境（对应React 17），而@testing-library/react@13依赖React 18新增的react-dom/client模块，导致路径查找失败。
• 错误2：Bit的构建胶囊（Capsule）中，MUI的样式引擎依赖@emotion/react，但当前环境未将该依赖注入到组件构建上下文，且胶囊内仍使用React 17版本，触发依赖缺失。

解决方案 #

1. 彻底切换组件到React 18环境 #

• 修改组件的本地配置文件（bit.json或*.bit.ts），将所有关联环境替换为React 18专用环境：

  {
    "env": {
      "compiler": "@bit-foundations/react.react-version-envs.react-18-env",
      "tester": "@bit-foundations/react.react-version-envs.react-18-env",
      "preview": "@bit-foundations/react.react-version-envs.react-18-env"
    }
  }
  

• 更新workspace.jsonc的variants配置，禁用旧环境并确保React 18环境全局生效：

  "teambit.workspace/variants": {
    "{ui/**}, {pages/**}": {
      "@bit-foundations/react.react-version-envs.react-18-env": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
      }
    },
    "*": {
      "teambit.react/react": null
    }
  }
  

2. 修复@emotion/react的依赖传递 #

• 将@emotion/react和@emotion/styled移到peerDependencies（因为MUI将其作为对等依赖），更新workspace.jsonc的dependency-resolver.policy：

  "peerDependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@testing-library/react": "^13.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  

• 清理Bit缓存并重新安装依赖：

  bit cache clear
  bit install
  

3. 验证配置并重新执行bit tag #

• 检查组件依赖树，确认React 18及相关依赖已正确应用：

  bit show cagosto48.select-boxes/ui/wizard-select --dependencies
  

• 重新执行标签命令：

  bit tag --all
  

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