React 18.2.0项目引入依赖包触发Invalid hook call错误求助

问题描述 #

基于React 18.2.0的create-react-app项目中，使用react-use等依赖包时触发Hook调用无效警告：

react_devtools_backend.js:2655 Warning: 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

See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 

已排查官方文档、相关社区内容，现有方案无效。触发问题的代码示例：

import useMeasure from 'react-use/lib/useMeasure';

// 函数组件内调用，注释该行错误消失
const [ref, measures ] = useMeasure();

多个依赖React 18.x的包均出现此问题，npm ls react显示所有依赖的React版本均为18.2.0，但仍怀疑存在多React副本。

排查与解决步骤 #

1. 强制统一所有依赖的React版本 #

在项目根目录的package.json中添加resolutions字段，强制所有子依赖使用项目根版本的React和ReactDOM：

{
  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

• npm用户：先安装依赖工具npm install -D npm-force-resolutions，然后在package.json的scripts中添加：

  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    // 其他原有脚本...
  }
  

  之后删除package-lock.json和node_modules，重新执行npm install。
• yarn用户：直接删除yarn.lock和node_modules，执行yarn install即可生效。

2. 手动清理嵌套的React副本 #

检查node_modules目录下是否存在嵌套的react/react-dom文件夹（比如node_modules/react-use/node_modules/react），如果有：

1. 删除整个node_modules文件夹
2. 删除package-lock.json（npm）或yarn.lock（yarn）
3. 重新执行依赖安装命令

3. 检测React实例是否重复 #

在项目入口文件（如src/index.js）顶部添加以下代码，查看控制台输出：

import React from 'react';
console.log('当前React实例:', React);
console.log('当前React版本:', React.version);

如果控制台输出多个不同的React实例，说明确实存在多副本问题，需回到步骤1-2彻底清理。

4. 处理npm link导致的本地包依赖问题 #

如果项目中使用npm link链接了本地开发的包，该包可能会加载自己的React副本：
在本地开发的包目录中，执行命令：

npm link ../你的主项目目录/node_modules/react

让本地包使用主项目的React实例。

5. 最后确认Hook调用规则 #

虽然注释Hook后错误消失，仍需再次确认：

• useMeasure必须在函数组件的顶层作用域调用，不能嵌套在if、for循环或普通函数中
• 调用Hook的组件是标准的函数式组件，不是类组件或被当作普通函数执行的组件

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