【エラー対応】code ERESOLVE 〜バージョンの依存関係に関するエラー〜

Next.jsのプロジェクトで以下のコマンドを実行したらエラーが出た

• 初期設定でeslintはインストール済み
• @typescript-eslint/parser、@typescript-eslint/eslint-pluginを新たにインストールしようとした時にコンフリクト発生

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

エラー内容

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: remake-hayaoki-girls-calendar@0.1.0
npm ERR! Found: @typescript-eslint/parser@5.62.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   @typescript-eslint/parser@"^5.42.0" from eslint-config-next@13.4.9
npm ERR!   node_modules/eslint-config-next
npm ERR!     eslint-config-next@"13.4.9" from the root project
npm ERR!   dev @typescript-eslint/parser@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@6.6.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/eslint-plugin@6.6.0
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/xxx/.npm/eresolve-report.txt for a full report.

• eslint-config-next@13.4.9で読み込んでる@typescript-eslint/parserのバージョンは5.42.0以上6.0.0未満という指定

• @typescript-eslint/eslint-plugin@6.6.0で読み込んでる@typescript-eslint/parserのバージョンは6.0.0 以上 7.0.0未満 あるいは 6.0.0-alphaという指定

• 2つのパッケージで読み込んでる同じパッケージ（ここでは@typescript-eslint/parser）のバージョンの指定範囲が重ならないためコンフリクトが起こりエラーになったと考えられる

やったこと

1. コンフリクトが起きた2つのパッケージのpackage.jsonの確認

• 以下のコマンドを実行するとパッケージのWebページが開く。そのあとGitHubリポジトリのpackage.jsonを見る

1.1 eslint-config-next

$ npm home eslint-config-next

package.json

"dependencies": {
    "@typescript-eslint/parser": "^5.42.0",
},

• eslint-config-next@13.4.9で読み込んでる@typescript-eslint/parserのバージョンは5.42.0以上6.0.0未満であることを確認できた

---

1.2 @typescript-eslint/eslint-plugin

$ npm home @typescript-eslint/eslint-plugin

package.json

"peerDependencies": {
    "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
},

• @typescript-eslint/eslint-plugin@6.6.0で読み込んでる@typescript-eslint/parserのバージョンは6.0.0 以上 7.0.0未満 あるいは 6.0.0-alphaということを確認できた

コンフリクトが起きた2つのパッケージのpackage.jsonの確認で、@typescript-eslint/parserのバージョンの指定範囲が重ならないことを確認できた。

2. eslint-config-nextの最新バージョンを調べる

$ npm search eslint-config-next
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
eslint-config-next        | ESLint…              | =timneutkens…   | 2023-08-19 | 13.4.19

$ npm search next
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
next                      | The React Framework  | =rauchg…        | 2023-08-19 | 13.4.19  |

• eslint-config-nextとnextの最新バージョンは13.4.19と確認できた
• eslint-config-nextとnextはバージョンを揃える必要がある

3. eslint-config-nextとnextのバージョンを最新にバージョンアップした

変更前のバージョン

package.json

"dependencies": {
    "eslint-config-next": "13.4.9",
    "next": "13.4.9",
},

変更後のバージョン（手で修正）

package.json

"dependencies": {
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
},

• バージョンを修正後、npm installを実行する
• 依存関係でコンフリクトが起こらず無事パッケージをバージョンアップできた

4. 冒頭で実行したコマンドを再度実行

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

• 無事インストールできた
  • @typescript-eslint/parserと@typescript-eslint/eslint-pluginはまだインストールしてない状態だったので、最新バージョンがインストールされる