Nextjs+Expo Monorepo项目出现Invalid Hooks Call错误如何解决？

根因说明 #

你的报错是两个原因叠加导致的：

1. @bt/shared公共包未将React相关依赖声明为peer依赖，导致自身安装了独立的React副本，被admin、mobile引入时会加载这份不属于当前应用的React，触发Hook规则校验失败
2. admin包使用React 17、mobile包（Expo SDK42绑定）使用React 16，两个子包React版本不一致，同时你的nohoist规则仅覆盖了react本身，未覆盖React相关渲染依赖，也会加剧副本问题

具体解决步骤 #

• 第一步：修改@bt/shared包的package.json配置
  将所有依赖的React生态相关包（react、react-dom、@apollo/client等）从dependencies移到peerDependencies，并设置兼容两个子包的版本范围，示例：

  "peerDependencies": {
    "react": ">=16.13.1 <18.0.0",
    "react-dom": ">=16.13.1 <18.0.0",
    "@apollo/client": "^3.4.0"
  }
  

  若使用TypeScript，可将上述包添加到devDependencies用于本地类型校验，不要放入生产依赖。

• 第二步：调整根目录package.json的nohoist规则
  补充React相关依赖的nohoist，避免渲染包版本不匹配：

  "nohoist": [
    "**/react",
    "**/react/**",
    "**/react-dom",
    "**/react-dom/**",
    "**/react-native",
    "**/react-native/**"
  ]
  

• 第三步：统一React版本（二选一即可）
  方案A：降低admin包版本适配mobile（操作成本更低）
  将admin包的react、react-dom以及对应的@types/react、@types/react-dom版本都改为16.13.1，和mobile包保持完全一致。
  方案B：升级mobile包Expo版本适配admin
  将Expo SDK升级到44及以上版本，配套升级React到17.0.2，和admin包保持一致。

• 第四步：清理缓存重装依赖
  根目录依次执行以下命令：

  # 删除所有旧依赖和锁文件
  rm -rf node_modules packages/*/node_modules yarn.lock
  # 重装依赖
  yarn install
  # 构建shared公共包
  yarn build:shared
  

  完成后重启应用即可解决报错。

验证方法 #

执行yarn why react，输出结果中不存在@bt/shared#react的条目，即说明公共包已正确使用宿主子包的React版本，无额外副本。

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