Yarnを使う

「いろんなReactが混じっている」は、Yarnを使うことで解消されます。

yarn dedupeと打ってみてください。

error The dedupe command isn't necessary. `yarn install` will already dedupe.

yarn installとした時点でパッケージの重複がなくなりInvalid hook call warningの確率が減ります。

yarn workspaceを使う

複数のリポジトリを管理していると、下みたいにReactが被ります。

フォルダ構成

root
  ├ packageA - React@^16.13.2
  └ packageB - React@16.12.0

例えば、「packageBでカスタムフックを用意して、packageAで使っている」ような状況です。

packageA -> packageB (依存関係)

こうした状況で、Invalid hook call warningは起きやすいです。

こうした場合は、Yarn Workspaceを使いましょう。

少しフォルダ構成を変えましょう。

フォルダ構成

root
  └ packages
    ├ packageA - React@^16.13.2
    └ packageB - React@16.12.0

rootのフォルダにpackagesフォルダを作っただけです。

packageAとpackageBのReactのバージョンは、どちらかに揃えましょう。

例

cd packages/packageB

yarn upgrade React

rootフォルダに移動しましょう

cd <path to root>

初期化します。

yarn init -y

package.jsonにworkspacesを足します。

package.json

{
   ...,
   workspaces: ["packages/*"]
}

＊＊

ここで、事前に各パッケージの node_modules / yarn.lock / package-lock.json を削除しておきましょう

＊＊

さて、rootにて

yarn

を実行します。

これで、Reactがルートフォルダのnode_modulesに集約され、Invalid hook call warning の確率が減ります。

GatsbyでInvalid hook call warningが起きたときは、何か別の原因が邪魔をしている場合があります。

とりあえず

gatsby build

と打ってみましょう。

そうすると「真のエラー」が出てくると思います。

それを調べ、直してから、もう一度 gatsby developで開発に戻りましょう。

たぶん、ここまでやっても起こるときは起こるのですが、多少はエラーでスタックする時間を減らせると思っています。

お役に立ちますように。