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

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

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

原因は３種類ある

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

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

1. 関数型コンポーネントの外でhooksを使おうとしている
2. コンポーネントのトップレベル以外（if文など）でhooksを使おうとしている
3. ２つ以上のReactが存在する（後ほど詳しく）

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

２つ以上のReactが存在する、とは？

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

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

Reactライブラリープロジェクト

• React（これがないと始まらない）
• Typescript（バグを減らしてきれいに書くため型が欲しい）
• rollup（アプリ開発はwebpack、ライブラリー開発はrollupらしい）

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

開発コンポーネント確認用プロジェクト

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

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

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

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

npm link による対応方法

私は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を参考にしました。