何度、くじけそうになったか…
React Hooksを使い始めた頃、CRAなどで作ったサイトはともかく
Gatsbyを使った時など、かなりの頻度でInvalid hook call warningに見舞われ、最悪の思いをした人も少なくないでしょう。
この記事では、Invalid hook call warningとなかよくなるための「いくつかのルール」を教えます。
※ 原因は、こちらを読んでください
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
yarn workspaceを導入しましょう
rootフォルダに移動しましょう
cd <path to root>
初期化します。
yarn init -y
package.jsonにworkspacesを足します。
{
...,
workspaces: ["packages/*"]
}
＊＊
ここで、事前に各パッケージの node_modules / yarn.lock / package-lock.json を削除しておきましょう
＊＊
さて、rootにて
yarn
を実行します。
これで、Reactがルートフォルダのnode_modulesに集約され、Invalid hook call warning の確率が減ります。
Gatsbyでの Invalid hook call warning
GatsbyでInvalid hook call warningが起きたときは、何か別の原因が邪魔をしている場合があります。
とりあえず
gatsby build
と打ってみましょう。
そうすると「真のエラー」が出てくると思います。
それを調べ、直してから、もう一度 gatsby developで開発に戻りましょう。
おわりに
たぶん、ここまでやっても起こるときは起こるのですが、多少はエラーでスタックする時間を減らせると思っています。
お役に立ちますように。