-
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 つずつ確認してください。
-
React Hooks
React 16.8.0
version で導入されました。最初react
に とのバージョンを確認してくださいreact-dom
。React Hook よりも上位であり、React Hook をサポートしていることが判明しました16.8.0
。除外する -
通話ルールに違反していないか確認してください
hook
。ただし、コンポーネント内では使用されていませんhook
が、依存するサードパーティのライブラリが使用されておりhook
、使用方法は正しいです。 -
プロジェクトに複数の異なるバージョンが存在するかどうかを確認します
react
。依存関係がテスト プロジェクトとコンポーネント ライブラリの両方に存在することが判明しましたreact
が、両方ともコンポーネント ライブラリのプロパティに追加package.json
されています。決断されるreact
react-dom
peerDependencies
-
-
問題の原因は第 3 条にあると考えられます。引き続きドキュメントを確認してください。公式 Web サイトには考えられる理由が記載されています。
この問題は、npm リンクまたは同等のものを使用する場合にも発生する可能性があります。その場合、バンドラーは 2 つの React を「認識」する可能性があります。1 つはアプリケーション フォルダーに、もう 1 つはライブラリ フォルダーにあります。myapp と mylib が兄弟フォルダーであると仮定すると、考えられる解決策の 1 つは、mylib から npm link …/myapp/node_modules/react を実行することです。これにより、ライブラリはアプリケーションの React コピーを使用するようになります。
npm link
基本的には が原因であると判明していますが、 を使用する場合、 のオプションはnpm link
無視されず、コンポーネントライブラリのバージョン依存関係がこのオプションに格納されるのではないかと推測されます。package.json
peerDependencies
react
-
解決
例: コンポーネント ライブラリ プロジェクトのルート パス (
/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
依存関係を再インストールする必要があります。
npm/yarn リンク テスト パッケージでエラーが報告される 警告: 無効なフック呼び出しです。フックは呼び出すことしかできません...
おすすめ
転載: blog.csdn.net/zz00008888/article/details/132716750
おすすめ
ランキング