添加React Native到Monorepo后React Apollo Hooks失效求助

这种问题我在跨平台Monorepo项目里碰到过好几次，大概率是重复依赖导致的React上下文冲突——你添加React Native后，Web和RN子包可能各自安装了一套react、@apollo/react-hooks这类核心依赖，导致Hooks运行时找不到正确的上下文（毕竟Hooks的规则依赖单一React实例）。

下面是一步步的解决思路：

1. 排查重复依赖 #

先确认是不是真的存在多版本依赖冲突：

# 检查react的依赖树
yarn why react
# 检查@apollo/react-hooks的依赖树
yarn why @apollo/react-hooks

如果输出里显示同一个包被安装在根目录和多个子包（web、rn、控制器模块）里，那就是问题所在了。

2. 统一核心依赖版本 #

在根目录的package.json里添加resolutions字段，强制所有子包使用同一个版本的核心依赖：

{
  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@apollo/react-hooks": "^4.0.0",
    "graphql-tag": "^2.12.6"
  }
}

版本号请根据你实际使用的版本调整。

3. 调整控制器模块的依赖声明 #

把控制器模块里的react、@apollo/react-hooks从dependencies移到peerDependencies，这样它会复用宿主应用（Web或RN）的依赖，避免重复安装：

// 控制器模块的package.json
{
  "name": "@your-workspace/apollo-controller",
  "peerDependencies": {
    "react": "^18.2.0",
    "@apollo/react-hooks": "^4.0.0",
    "graphql-tag": "^2.12.6"
  },
  "devDependencies": {
    // 只在开发时安装类型定义或测试依赖
    "@types/react": "^18.2.0"
  }
}

4. 清理缓存并重新安装 #

# 清除Yarn缓存
yarn cache clean
# 删除所有子包的node_modules
rm -rf node_modules */node_modules
# 重新安装依赖
yarn install

5. 配置Metro（针对React Native） #

React Native的Metro打包器默认可能不会正确识别Yarn Workspaces的hoisted依赖，需要在metro.config.js里添加配置，让它优先使用根目录的依赖：

const path = require('path');
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 指向根目录的node_modules
config.resolver.extraNodeModules = new Proxy({}, {
  get: (target, name) => path.join(__dirname, '../node_modules', name),
});

// 确保Metro能识别Monorepo的路径
config.watchFolders = [path.join(__dirname, '../')];

module.exports = config;

如果是原生RN项目（非Expo），调整对应的Metro配置即可。

做完这些步骤后，再测试你的React Native组件，应该就能正常使用Apollo Hooks了。本质上就是确保整个Monorepo里只有一套React和Apollo依赖，让Hooks能共享正确的上下文。

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