はじめに
とある日、何気なくコードを書いている時に今まで動いていた ESlint の警告が出なくなっていることに気がつきました。
原因の特定と解決までに少し時間がかかったので、備忘録としてまとめておきます。
エラー
警告が出ない事象には時々遭遇しており、普段は VSCode を立ち上げ直すと解消していました。しかし今回は VSCode を再起動しても PC を再起動しても解消しません。。
yarn lint コマンドを叩くと、このようなエラーが出ていました。
Plugin "react-hooks" was conflicted between ".eslintrc.json >> plugin:react-hooks/recommended" and ".eslintrc.json >> eslint-config-next/core-web-vitals >> Users/user/hoge-app/node_modules/eslint-config-next/index.js >> plugin:react-hooks/recommended"
なんだか、プラグインが競合していると言われているぞ...？
原因
yarn.lock ファイルを削除して yarn install をやり直していたことが原因だった
実は、少し前にパッケージのインストール・アンインストールなど、パッケージ周りの操作をごちゃごちゃと行っていました。
その修正を一度リセットしたく、インストール済みのパッケージを一度全て消して再インストールを試みました。
rm -rs node_modules yarn.lock
yarn install
ここで、依存パッケージ（特に eslint や plugin:react-hooks）が複数バージョンで重複してインストールされてしまったようです。
結果、.eslint.json の設定で plugin:react-hooks/recommended を指定している部分と、eslint-config-next 側で内部的に同じものを読み込もうとしてバージョンが衝突し、エラーが発生していました。
なぜ、このようなことが起こる？
以下、 ChatGPT さんによる解説です。
yarn.lock は、依存関係の正確なバージョンや解決結果をロック（固定）してくれている重要なファイルです。
これを削除してしまうと、同じ package.json を使っていても、環境や依存の状態によって異なるバージョンのパッケージがインストールされる可能性があります。
特に ESLint のように、プラグインや共有設定（extends）を多段で読み込むツールは、同一のプラグインが複数の場所に存在すると衝突を起こしやすいのです。
なるほど、、そんなことがあるんですね。
解決方法
ファイルは全て Git 管理していたので yarn.lock の変更内容を元に戻し、再度 yarn install 実行と必要なパッケージの追加を行いました。
結果、無事に yarn lint も動作するようになり問題は解消しました。
終わりに
今回、エラーの原因は「依存関係の衝突」でしたが、エラー文からの原因特定がすぐには進まず、結局のところは自分の直前の操作が問題となっていました。
エラーだけを必死に読み解こうとするのではなく、まずは直近の自分がやったことを振り返ることも大事だなと、改めて感じました。
意外と近くに答えがあるという事象、よくありますよね。
もし同じような問題が起きた方の参考になれば、幸いです。
ここまでお読みいただきありがとうございました！