第三方组件的Hooks为啥报错了？

涉及知识点包括：

• hooks源码逻辑
• package.json配置

事发

某个需求需要引入一个第三方组件库。

当引入组件库中的函数组件A后，React运行时报错：

• "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...

从React文档了解到，这是由于「错误使用Hooks造成的」。

官网给出的可能的错误原因有3种：

1.React和ReactDOM版本不匹配

需要v16.8以上版本的ReactDOM才支持Hooks。

我们项目使用的是v17.0.2，不属于这个原因。

2.打破了Hooks的规则

Hooks只能在函数组件或自定义Hooks顶层调用。于这个原因。

3.重复的React

载录自React文档：

• 为了使 Hook 正常工作，你应用代码中的 react 依赖以及 react-dom 的 package 内部使用的 react 依赖，必须解析为同一个模块。
• 如果这些 react 依赖解析为两个不同的导出对象，你就会看到本警告。这可能发生在你意外地引入了两个 react 的 package 副本。

读起来好绕，看起来这条的嫌疑最大。

定位问题

在报错的useRef中打上断点，发现其来自于：

http://localhost:8081/Users/项目目录/node_modules/组件库/node_modules/react/cjs/react.development.js

在项目里其他调用Hooks但是未报错的地方打上断点，发现资源来自于：

http://localhost:8081/Users/项目目录/node_modules/react/cjs/react.development.js

报错的useRef和项目其他Hooks引用了不同的react.development.js。

翻看「组件库」的package.json，发现他将react与react-dom作为depende会在「组件库」目录的node_modules下创建这两个依赖。

作为一个「组件库」，这么做显然是不合适的。

临时解决

最好的做法是将这两个依赖作为peerDependencies，即将其作为外部依赖。

这样，当我们引入「组件库」时，「组件库」会使用我们项目中的react与react-dom，而不是自己安装一份。

但是我没有这个「组件库」的权限，只能在自己项目中做文章。

在package.json文档中提供了一个配置项：resolutions，可以临时解决这个问题。

resolutions允许你复写一个在项目node_modules中被嵌套引用的包的版本。

在我们项目的package.json中作出如下修改：

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!