React Monorepo中出现"Invalid hook call"错误的原因排查

核心原因 #

React Hook的运行机制要求整个应用生命周期内只有一份React实例。你在Common包中安装react作为开发依赖后，构建/运行时可能加载了Common包自身node_modules里的React实例，和RN/Web应用的React实例不一致，触发了Hook校验逻辑的警告。

分步解决方案 #

1. 修正Common包的依赖配置

将react从devDependencies移至peerDependencies，明确Common包依赖宿主应用提供的React版本，避免自身安装独立实例：

// packages/common/package.json
{
  "peerDependencies": {
    "react": "^18.x.x", // 与你的RN/Web应用React版本保持一致
    "react-native": "^0.7x.x" // 若Common包依赖RN API则添加
  },
  "devDependencies": {
    "@types/react": "^18.x.x",
    "react": "^18.x.x", // 保留dev依赖供Jest测试使用，版本需匹配主应用
    "react-test-renderer": "^18.x.x"
  }
}

2. 强化Yarn Workspace的Nohoist规则

确保react/react-native完全不被hoist到根目录以外的位置，检查根目录package.json：

// root/package.json
"workspaces": {
  "packages": ["packages/*"],
  "nohoist": [
    "**/react",
    "**/react-native",
    "**/react/**",
    "**/react-native/**"
  ]
}

执行清理重装操作：

yarn cache clean
rm -rf node_modules packages/*/node_modules yarn.lock
yarn install

3. 调整Metro配置（RN应用）

强制Metro从根目录加载React，避免解析到Common包的本地依赖：

// packages/rn-app/metro.config.js
const path = require('path');

module.exports = {
  resolver: {
    extraNodeModules: new Proxy({}, {
      get: (target, name) => {
        if (['react', 'react-native'].includes(name)) {
          return path.join(__dirname, '../node_modules', name);
        }
        return path.join(process.cwd(), 'node_modules', name);
      },
    }),
  },
  watchFolders: [path.resolve(__dirname, '../')],
};

4. 调整CRACO/Webpack配置（Web应用）

通过别名强制Webpack从根目录加载React实例：

// packages/web-app/craco.config.js
const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'react': path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    },
  },
};

5. 验证实例唯一性

在RN/Web应用中添加调试代码，确认React实例路径一致：

// RN/Web应用入口文件
console.log('App React path:', require.resolve('react'));
console.log('Common React path:', require.resolve('@your-scope/common/node_modules/react'));

若两个路径不同，需进一步排查依赖解析规则是否生效。

6. Jest测试兼容处理

确保Common包的Jest测试使用与主应用一致的React版本，调整jest.config.js：

// packages/common/jest.config.js
module.exports = {
  moduleNameMapper: {
    'react': '<rootDir>/../node_modules/react',
  },
};

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