私有React组件库引入其他CRA项目触发Invalid hook call报错如何解决？

错误原因 #

这个Hook报错的核心原因是存在两个独立的React实例：你通过本地link引用私有组件包时，私有包devDependencies中安装的React和你的业务项目安装的React是两份不同的副本，不符合React Hook要求同一上下文内只能有一个React实例的规则。

解决方案 #

按以下步骤操作即可解决：

• 第一步：调整私有组件包的依赖配置
  打开私有包的package.json，删除devDependencies下的react、react-dom两行配置，你已经在peerDependencies中声明了React版本要求，无需在开发依赖中重复安装，确保私有包会直接使用宿主项目提供的React实例。
• 第二步：清理双方的依赖缓存
  分别进入私有组件包、业务项目的根目录，删除各自的node_modules文件夹和yarn.lock/package-lock.json锁文件。
• 第三步：重新安装依赖并构建
  1. 先在私有组件包根目录执行yarn install，依赖安装完成后执行yarn build构建编译产物
  2. 再进入业务项目根目录执行yarn install重新安装依赖
• 第四步（可选，彻底避免多实例问题）
  如果后续还是偶发同类报错，可通过craco等工具修改CRA项目的webpack配置，添加别名强制所有React依赖都指向业务项目的本地版本：

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

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