⚠️

[npm][eslint]code ERESOLVEnpm ERR! ERESOLVE could not resolve 解消手順

2024/04/10に公開

Next.js

Next.jsの環境構築中、@typescript-eslint/parserと@typescript-eslint/eslint-pluginのインストール時に依存関係の競合によるエラーが発生した。実際にエラーを解消した手順を記す。

エラー内容

エラーは、Next.jsの環境構築中、TypeScriptのESLint用ルールをtypescript-eslint を用いて設定するため、以下のコマンドを実行した際に発生した。

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @typescript-eslint/eslint-config-next

エラーログ全文

npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: hogehoge@0.1.0
npm ERR! Found: @typescript-eslint/parser@6.21.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   @typescript-eslint/parser@"^5.4.2 || ^6.0.0" from eslint-config-next@14.1.4
npm ERR!   node_modules/eslint-config-next
npm ERR!     dev eslint-config-next@"14.1.4" 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@7.4.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^7.0.0" from @typescript-eslint/eslint-plugin@7.4.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! 
npm ERR! For a full report see:
npm ERR! /Users/hoge/.npm/_logs/2024-03-31T08_22_11_170Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/hoge/.npm/_logs/2024-03-31T08_22_11_170Z-debug-0.log```

エラーログを確認すると、@eslint-config-next@14.1.4が@typescript-eslint/parserのバージョン^5.4.2又は^6.0.0を必要としている一方で、@typescript-eslint/eslint-pluginが@typescript-eslint/parserのバージョン^7.0.0を必要としており、依存関係の競合が発生していることがわかる。

エラーの解消方法

通常、複数のパッケージが同一のパッケージの異なるバージョンに依存する場合、依存されるパッケージのバージョンを各パッケージが必要とするバージョンの範囲内のものに変更することで解消することができる。
しかし、今回のケースでは@typescript-eslint/parserについて、@eslint-config-nextがバージョン5.4.2以上6.0.0未満、@typescript-eslint/eslint-pluginがバージョン7.0.0以上8.0.0未満を必要としている。つまり、依存するバージョン範囲が重なっておらず、競合が発生している。

そこで、依存バージョンの範囲が重なるよう、@eslint-config-nextと@typescript-eslint/eslint-pluginのバージョン変更を検討することとした。

今回のケースでは、@eslint-config-nextの要求バージョンが@typescript-eslint/eslint-pluginの要求バージョンよりも低くなっているため、@typescript-eslint/eslint-pluginのバージョン指定を下げることとした。
過去バージョンの依存パッケージはnpmのドキュメントから確認することができる。
https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
Versionsのタブから、過去のバージョンの一覧を確認することができるため、過去のバージョンを確認する。

依存パッケージを確認したいバージョンの番号をクリックすることで、そのバージョンについての情報を確認することができる。今回はメジャーバージョンを最新版バージョンの7.x.xより一つ繰り下げ、6.x.xの最終バージョンである6.21.0を確認した。

依存パッケージは、Codeタブを開きpackage.jsonで確認することができる。

　6.21.0では@typescript-eslint/parserのバージョン指定が^6.0.0 || ^6.0.0-alphaとなっていることが確認できた。これは、@eslint-config-next@14.1.4の依存バージョンの範囲と合致するため、このバージョンを使用することとする。

以下のコマンドでeslint-pluginバージョンを指定し、問題なくインストールすることができた。

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin@6.21.0

エラー内容

エラーの解消方法

Discussion