自作のnpmパッケージを使ったら「Invalid Hook Call Warning」が出てきた

2021-06-10

React における手強いエラーの 1 つに Invalid Hook Call Warning が挙がると思います。

Invalid Hook Call Warning

  1. React と React DOM のバージョンがマッチしていない。
  2. フックのルールに違反している。
  3. 同じアプリ内に 2 つ以上の React のコピーが含まれている。

React の公式サイトにはこのように書かれていて、ほとんどのケースでは 3 が当てはまると思います。

で、今回自作の npm パッケージを使用しようとしたところエラーが発生したため、その解決法を書いていこうと思います。


結論から書いてしまうと、自作の npm パッケージ内で使用しているいくつかのパッケージが React のバージョンに追いついていないことが原因でした。

たとえば、自分はよく react-no-ssr というパッケージを使用するのですが。

このパッケージは最終リリースが 5 年前で終わっており、React  のバージョン 15 および 16 しか対応されていません。

で、今回の npm パッケージでは React のバージョン 17 で開発を行っていたため npm install 時に複数の React がインストールされてしまう、といった自体に陥っていました。

また、他の npm パッケージでも同様の事態が発生していました。


この場合の対応については以下のような感じかなーと思います。

  1. 元々の npm パッケージのバージョン情報を確認し、新しいバージョンがリリースされていたらアップデートを行う
  2. 新しいバージョンがリリースされていない場合、そのパッケージの使用を断念する

今回のケースでは react-no-ssr 以外のパッケージについてはアップデートで問題が解消されましたが、react-no-ssr については残念ながら使用を断念することとなりました。

その代わりに、同様に考えられていたっぽい人による自作の @mpth/react-no-ssr というパッケージを見つけましたので、こちらに差し替えて無事エラーの解消に至りました。


おそらくさまざまなケースで発生するエラーだと思いますが、具体的な対処法まで書かれている記事はあまり目にすることがなかったので、参考までに。

© 2018 kk-web