npm/yarn リンク テスト パッケージでエラーが報告される 警告: 無効なフック呼び出しです。フックは呼び出すことしかできません...

• dumi開発コンポーネント ライブラリを使用する場合React、すべての変更が公開されることを避けるために、ローカル テスト プロジェクトでそれを使用してコンポーネント ライブラリへのソフト接続を確立し、ローカル デバッグを容易にするnpm必要があります。npm link

• ローカル テスト プロジェクトで結果を使用した後$ npm link 组件库、内部コンポーネントを使用してエラーが報告されます。

  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.
  

• エラー メッセージには、考えられる 3 つの理由が示されています。これらの考えられる理由を 1 つずつ確認してください。

  1. React HooksReact 16.8.0version で導入されました。最初reactに とのバージョンを確認してくださいreact-dom。React Hook よりも上位であり、React Hook をサポートしていることが判明しました16.8.0。除外する

  2. 通話ルールに違反していないか確認してくださいhook。ただし、コンポーネント内では使用されていませんhookが、依存するサードパーティのライブラリが使用されておりhook、使用方法は正しいです。

  3. プロジェクトに複数の異なるバージョンが存在するかどうかを確認しますreact。依存関係がテスト プロジェクトとコンポーネント ライブラリの両方に存在することが判明しましたreactが、両方ともコンポーネント ライブラリのプロパティに追加package.jsonされています。決断されるreactreact-dompeerDependencies

• 問題の原因は第 3 条にあると考えられます。引き続きドキュメントを確認してください。公式 Web サイトには考えられる理由が記載されています。

  この問題は、npm リンクまたは同等のものを使用する場合にも発生する可能性があります。その場合、バンドラーは 2 つの React を「認識」する可能性があります。1 つはアプリケーション フォルダーに、もう 1 つはライブラリ フォルダーにあります。myapp と mylib が兄弟フォルダーであると仮定すると、考えられる解決策の 1 つは、mylib から npm link …/myapp/node_modules/react を実行することです。これにより、ライブラリはアプリケーションの React コピーを使用するようになります。

  npm link基本的には が原因であると判明していますが、 を使用する場合、 のオプションはnpm link無視されず、コンポーネントライブラリのバージョン依存関係がこのオプションに格納されるのではないかと推測されます。package.jsonpeerDependenciesreact

  

• 解決

  例: コンポーネント ライブラリ プロジェクトのルート パス ( /Users/xxx/Desktop/design)、テスト プロジェクトのルート パス ( /Users/xxx/Desktop/testlink)。

  ソフト测试项目リンク组件库项目にインストールされているバージョンreactで十分ですが、解決していない場合はreact-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 组件库包，并重启测试测试项目。
  

  別の解決策もあります:node_modulesコンポーネント ライブラリ プロジェクト フォルダー内のパッケージを削除するreactことでも問題を解決できます。原理は同じです。react両方のパッケージのバージョンは 1 つだけです。ただし、この方法はお勧めできません。結局、エラーが発生しますパッケージ化されたコンポーネント ライブラリを削除すると、npm i依存関係を再インストールする必要があります。