npm/yarn link test package reports an error Warning: Invalid hook call. Hooks can only be called ...

• When using dumithe development Reactcomponent library, in order to avoid publishing every modification npm, you need to use in the local test project to npm linkestablish a soft link for the component library to facilitate local debugging.

• As a result, after using in the local test project $ npm link 组件库, an error is reported when using internal components:

  react.development.js:209 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.
  

• Three possible reasons are provided in the error message, check the three possible reasons one by one:

  1. React Hookswas React 16.8.0introduced in the version, check the versions of reactand first react-dom. Discovery is above 16.8.0and supports React Hook. exclude

  2. Checks for violations of hookthe rules for calling . However, it is not used in the component hook, but the dependent third-party library is used hook, and the usage method is correct; exclude

  3. Check if there are multiple different versions of the project react. It was found that dependencies exist in both the test project and the component library react, but both and package.jsonhave been added to the properties in the component library. To be determinedreactreact-dompeerDependencies

• It is very likely that the third article caused the problem. Continue to consult the documentation. The official website has given possible reasons here .

  This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link …/myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

  It has been basically determined that npm linkthe problem is caused by . It is guessed that when using , the option in npm linkwill not be ignored , and the version dependencies in the component library are stored in this option.package.jsonpeerDependenciesreact

  

• solution

  For example: component library project root path ( /Users/xxx/Desktop/design), test project root path ( /Users/xxx/Desktop/testlink).

  The version installed in 测试项目the soft link in is enough. If it has not been resolved, then also make a soft link to the test project.组件库项目reactreact-dom

  # 1、进入测试项目
  $ cd /Users/xxx/Desktop/testlink
  
  # 2、软链接组件库中安装的 react 版本
  $ npm link /Users/xxx/Desktop/design/node_modules/react
  # （备用）如果还是报错，可在链接 react-dom，但是一般不需要，link react 基本也就解决了。
  $ npm link /Users/xxx/Desktop/design/node_modules/react-dom
  
  # 3、重新跑测试项目，确保组件库项目包正确，可以重新打包，在到测试项目中 link 组件库包，并重启测试测试项目。
  

  There is another solution: deleting the package node_modulesin the folder of the component library project reactcan also be solved, the principle is the same, there is only one version of reactthe package for the two, but this method is not recommended, after all, an error will be reported when the packaged component library is deleted , have to reinstall npm idependencies.