![[NPM] Conflicting peer dependencyエラー解決](/assets/images/category/environment/node/background.avif)
概要
NodeJSでプロジェクトを進む時、NPMを使って必要なパッケージをインストールすることは必須です。今回のブログポストではNPMを使ってパッケージをインストールする時発生するConflicting peer dependencyエラーを解決する方法について説明します。
Conflicting peer dependencyエラー
npm installコマンドを使ってパッケージをインストールする時、次のようにConflicting peer dependencyエラーが発生する場合があります。
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-react@latest, @typescript-eslint/parser@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! @typescript-eslint/eslint-plugin@"^5.5.0" from [email protected]
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app@"^7.0.1" from [email protected]
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"5.0.1" from the root project
npm ERR! peerOptional @typescript-eslint/eslint-plugin@"^4.0.0 || ^5.0.0" from [email protected]
npm ERR! node_modules/eslint-plugin-jest
npm ERR! eslint-plugin-jest@"^25.3.0" from [email protected]
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app@"^7.0.1" from [email protected]
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"5.0.1" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"6.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/parser
npm ERR! peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"6.4.1" 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/deku/.npm/_logs/2023-08-23T07_12_06_464Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/deku/.npm/_logs/2023-08-23T07_12_06_464Z-debug-0.log
Conflicting peer dependencyエラーはインストールしたいパッケージの依存関係(Dependency)と既にインストールされた依存関係が競合する時発生します。つまり、インストールしたいパッケージを使うために当該パッケージが必要とするパッケージたちが既にインストールされたパッケージのバージョンと競合する時発生します。
このブログポストで紹介したエラーを詳しく見ると、@typescript-eslint/parserパッケージの6.4.1バージョンが既にインストールされたあるけど、@typescript-eslint/eslint-pluginパッケージが@typescript-eslint/parserのバージョン^6.0.0 || ^6.0.0-alphaを要求しているため、インストールできないとConflicting peer dependencyエラーを表示しています。
解決方法
Conflicting peer dependencyエラーを解決する方法は次の通りです。
–forceまたは–legacy-peer-depsオプション
この問題を解決するためにはnpm installを実行する時、次のように--forceまたは--legacy-peer-depsオプションを使ってインストールすることができます。
npm install [Package name] --force
npm install [Package name] --legacy-peer-deps
.npmrcファイル
競合問題は頻繁に発生しないですが、もし現在のプロジェクトで競合問題が頻繁に発生する場合はプロジェクトフォルダに.npmrcファイルを作成して次のように修正します。
legacy-peer-deps=true
このように.npmrcファイルを作成しておくと、npm installコマンドを実行する時、--legacy-peer-depsオプションを使うのと同じように動作します。
npm config
.npmrcファイルを生成してlegacy-peer-depsを直接設定することも可能ですが、次のコマンドを使って.npmrcファイルを設定することもできます。
npm config --location=project set legacy-peer-deps=true
--locationオプションにはglobal、user、projectを設定することができます。projectを設定する場合は、このコマンドを実行したフォルダに.npmrcファイルが生成されてlegacy-peer-deps=trueが自動的に設定されます。
完了
これでNPMを使ってパッケージをインストールする時、たまに発生するConflicting peer dependencyエラーを解決する方法について見てみました。Conflicting peer dependencyエラーが発生したら、上記の方法を使って解決してみてください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
