"Invalid Hook Call Warning"の原因と対応方法

Reactライブラリーを開発するため環境構築で"Invalid Hook Call Warning"に対処したので、その原因と対応方法について書きます。

"Invalid Hook Call Warning"の原因とは？

ReactのHooksの書き方や、Reactプロジェクトの構成が原因で発生するエラーです。

Reactの公式ページで詳しく解説されていて具体的には３つの原因があります。

Reactや、その周辺ライブラリーを使いながらアプリ開発をしていて"Invalid Hook Call Warning"に遭遇するケースはほぼ1や2のケースです。

複数のReactパッケージを参照しながら１つのReactアプリを動かそうとしてしまっている状態です。

Reactライブラリーを開発する際に私は以下のような構成を選びました。

こちらのサイトの通りに構築しました。

こちらは create-react-app のTypescript使用バージョンで簡単に作りました。

この構成でライブラリーの中でhooksを使い、開発コンポーネント確認用プロジェクトでnpm startして動きを確認しようとすると"Invalid Hook Call Warning"が発生します。

これは開発コンポーネント確認用プロジェクトは、そのプロジェクト内のnode_modulsにあるreactを参照しますし、
Reactライブラリーとして開発中のコンポーネントは、Reactライブラリープロジェクトにあるnode_modulsのreactを参照してしまう訳です。

こうして、「２つ以上のReactが存在する」という条件が整ってエラーになります。

私はnpmを使っているので以下の方法で対応しました。

開発コンポーネント確認用プロジェクトで以下のコマンドを実行

cd node_modules/react && npm link
cd ../../
cd node_modules/react-dom && npm link
cd ../../

Reactライブラリープロジェクトで以下のコマンドを実行

npm link react && npm link react-dom
npm link

再び開発コンポーネント確認用プロジェクトで以下のコマンドを実行

npm link [module-name]

困っている人たちがたくさんいるようで、こちらのissueを参考にしました。