概要
Next.jsで自実装中
今まで普通に立ち上がっていたローカルサーバーが急遽立ち上がらなくなりました、、、
Invalid hook call. Hooks can only be called inside of the body of a function component. This could
こちらエラー内容
どうやらhooksの使い方に問題があるようです
Reactのドキュメントの解決策
解決策としてはReactのドキュメントに3つあげられています。
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
React-domのバージョン古くない？笑
そもそもhooksの使い方間違ってるやないかい！！！！
Reactのバージョン複数持っちゃってるんじゃない？
って感じのことが書いてあります笑
https://reactjs.org/warnings/invalid-hook-call-warning.html
原因を探っていく
上記の3つの原因のどれに当てはまっているかをまずは切り分けしていくことが重要です。
これはどのエラーにも共通します。
まずバージョン
これはReactのバージョンが16.0.8以下だとそもそもhooksに対応していないのでエラーになります。
これはReact versionなどでググって解決しましょう！！
hooksの使い方違くない？
これはそもそもhooksの使い方が違っている場合です。
これはhooksのドキュメントを見直して見ることをおすすめします。
大体の場合だとhooksとclassコンポーネントを同時に使ってしまっている場合が多いようです。
Reactのバージョン複数持っちゃってるんじゃないい？笑
自分の場合はおそらくこれに該当しました。
なぜこれに辿り着けたかというと、自分の場合は今までは通常に動作していたため、コードに問題があるかというよりかはバージョン管理に問題ががあると切り分けました。
またバージョンも16.0.8以上だったので絶対これだあああと断定しました。
結論の解決策
おそらく3つ目のタイプの場合は知らないうちにnode_modulesやpakege.jsonあたりをいじってしまっている可能性が高いです。
Reactのバージョンが2つインストールされているなど、
解決策として結論からいうとnpmを再インストールすることです！
- 一度ローカルサーバーを停止させます
- node_modulesを削除(node_modulesが壊れるというのはよくある話みたいでこちらは削除しても特に問題ありません！)
- yarn.lockとpakege-lock.jsonを削除(こちらはバージョン管理のログのようなものが記載されているのでこれが残っていると再インストールしてもまた同じものがインストールされてしまします)
package-lock.jsonとyarn.lockは、プロジェクトが依存してるパッケージの正確なバージョンを記録してるファイルです。 - こちら2つのファイルを削除し終わったら
npm install
以上です。
やってることに関してはlockファイルを削除することで以前の状態のキャッシュを効かせることができます！
つまりlockファイルを削除していないと、キャッシュが効かせられないのでいくら再インストールしても解決できないということですね！
node_modulesが壊れたりバージョン管理でミスった時は一度落ち着いて、元の状態に戻すこともおすすめです！！
お疲れ様でした！！！