Turborepo+pnpm单仓库中React Hooks调用无效问题排查

你遇到的Hook调用错误，大概率是UI包的React依赖配置不当导致的——虽然你认为不存在多份React副本，但pnpm的依赖隔离机制可能让UI包在开发或构建时使用了独立的React实例，和Web应用的React实例不共享。以下是具体排查和解决步骤：

1. 修正UI包的package.json依赖配置 #

将React和ReactDOM移到peerDependencies，而非dependencies或devDependencies：

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": true
    },
    "react-dom": {
      "optional": true
    }
  },
  "devDependencies": {
    // 保留react和react-dom在devDependencies用于本地开发（比如Storybook）
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

这样配置后，UI包会复用宿主应用（Web应用）的React实例，从根源避免多副本冲突。

2. 配置pnpm强制共享React依赖 #

在根目录的.npmrc文件中添加以下配置，确保React被全局提升，所有工作区包共享同一版本：

public-hoist-pattern[]=react
public-hoist-pattern[]=react-dom

如果仍存在版本不一致问题，可在根目录的package.json中添加pnpm.overrides强制统一版本：

{
  "pnpm": {
    "overrides": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0"
    }
  }
}

3. 检查UI包的构建工具配置 #

如果UI包使用Rollup、tsup等工具构建，需将React设为外部依赖，避免打包时将React代码嵌入组件库：

• Rollup示例：

// rollup.config.js
export default {
  external: ['react', 'react-dom'],
  // ...其他配置
};

• tsup示例：

// tsup.config.ts
export default defineConfig({
  external: ['react', 'react-dom'],
  // ...其他配置
});

4. 清理依赖重新安装 #

执行以下命令清理现有依赖并重新安装，确保所有配置生效：

pnpm install --shamefully-hoist
pnpm run build --filter=ui
pnpm run dev --filter=web-app

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