导入自定义Hook库时触发Invalid hook call错误求助

问题重现 #

当从use-custom-hooks包导入useToggle时，触发以下错误：

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app

但将完全相同的useToggle代码放在项目本地文件中使用时，一切正常。

核心原因 #

这个问题几乎可以确定是项目中存在多份React实例导致的：
第三方包use-custom-hooks在打包过程中，错误地将React作为依赖打包进了包内，而你的项目本身也安装了一份React。Hooks的运行依赖React内部的状态跟踪上下文，两份独立的React实例会让Hook无法正确关联到组件的执行环境，从而触发Invalid Hook Call错误。

解决方案 #

1. 检查并反馈包的问题 #

打开use-custom-hooks包的package.json文件，查看dependencies和peerDependencies字段：

• 如果React出现在dependencies里，说明包作者错误地将React作为生产依赖打包了，正确的做法应该是把React放在peerDependencies中（声明包依赖的React版本范围，但不打包进包内）。
• 你可以给该包的仓库提交Issue，要求作者修复这个依赖配置问题。

2. 本地临时修复方法 #

方法一：通过link共享React实例

在你的项目根目录执行以下命令，让第三方包使用项目本地的React：

• npm：

  npm link ./node_modules/react
  

• yarn：

  yarn link react
  

方法二：通过构建工具强制使用单份React

以Webpack为例，在配置文件中添加resolve.alias，强制所有依赖都指向项目本地的React：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    }
  }
};

3. 替代方案 #

如果包作者长期不修复问题，最稳妥的方式就是继续使用你本地的useToggle实现，或者寻找其他维护规范的同类自定义Hook包。

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