本地依赖中无法使用React Hooks问题求助

问题场景 #

有3个基于React 18的本地项目，依赖关系如下：

• 项目1（UI项目）：依赖项目2和项目3
• 项目2（模块导出项目）：依赖项目3
• 项目3（组件库+上下文管理项目）：提供包含useEffect等Hook的组件

当项目2引入项目3中带有Hook的组件时，页面触发报错；移除组件内的useEffect并重新构建后，浏览器可正常渲染。

已做的尝试与排查：

• 将项目2、3的package.json中react和react-dom从dependencies/devDependencies移除，仅保留在peerDependencies中
• 试过yalc、npm link、npx link、npm i --no-save等多种本地依赖引入方式，问题未解决
• 确认所有项目均使用React 18，无版本不匹配问题
• 检查代码未违反Hook规则
• 怀疑存在多份React副本，但配置后仍未解决

核心原因 #

本地开发时，即使配置了peerDependencies，子项目（项目2、3）的构建工具可能仍会加载自身node_modules中的React副本，导致React Hook检测到多份实例，触发报错（Hook必须在同一React实例下调用）。

解决方案：强制共享主项目的React实例 #

通过配置构建工具，让项目2和3强制使用项目1的React副本，确保全局只有一份React实例。

1. Webpack/CRA项目配置 #

原生Webpack

在项目2和3的webpack.config.js中添加别名配置：

const path = require('path');

module.exports = {
  // ...其他原有配置
  resolve: {
    alias: {
      // 替换为项目1的实际路径
      'react': path.resolve(__dirname, '../project-1/node_modules/react'),
      'react-dom': path.resolve(__dirname, '../project-1/node_modules/react-dom')
    }
  }
};

Create React App（使用craco）

在项目2和3的craco.config.js中配置：

const path = require('path');

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

2. Vite项目配置 #

在项目2和3的vite.config.js中添加别名：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  // ...其他原有配置
  resolve: {
    alias: {
      'react': path.resolve(__dirname, '../project-1/node_modules/react'),
      'react-dom': path.resolve(__dirname, '../project-1/node_modules/react-dom')
    }
  }
});

3. 后续验证步骤 #

• 清理所有项目的node_modules和构建缓存，重新安装依赖
• 若使用npm link，确保在项目1中执行npm link ../project-2 ../project-3，而非反向链接
• 用打包分析工具（如webpack-bundle-analyzer）确认项目2、3的构建产物中未包含react/react-dom

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