はじめに
環境構築中に、以下のエラーで手が止まったことはないでしょうか？
npm ERR! ERESOLVE unable to resolve dependency tree
自分もVite + Reactの環境構築中にこのエラーに遭遇し、
最初は対処法だけで乗り切っていました。
ただ、何度も出る中で「なぜ起きるのか」を理解しておかないと
毎回詰まると感じたため、整理しました。
エラー内容
実際によく見るエラーは以下のようなものです。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! While resolving: sample-app@0.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from some-library@1.0.0
npm ERR! node_modules/some-library
npm ERR! some-library@"^1.0.0" from the root project
何が起きているのか
ポイントはこの2行です。
Found: react@18.2.0
peer react@"^17.0.0" from some-library
つまり：
- プロジェクト → React 18 を使っている
- ライブラリ → React 17 を要求している
👉 バージョンが合わないため依存関係が解決できない
これが
ERESOLVE unable to resolve dependency tree
の正体です。
なぜこのエラーが出るのか
npm v7以降の仕様変更が原因です。
npm v6まで
- peerDependencies の不整合は「警告」だけ
npm v7以降
- peerDependencies の不整合は「エラー」
👉 より厳密に依存関係をチェックするようになった
解決方法
① とりあえず動かす
npm install --legacy-peer-deps
何をしているか
- peerDependenciesのチェックを無視
- npm v6と同じ挙動にする
使いどころ
- 検証・ローカル環境
- 一旦動かしたいとき
② 強制的にインストール
npm install --force
注意点
- 依存関係が壊れる可能性あり
- 本番では非推奨
③ バージョンを合わせる
例①：ライブラリに合わせる
npm install react@17
例②：ライブラリを上げる
npm install some-library@latest
👉 最も安全で推奨される方法
④ 環境をリセット
rm -rf node_modules package-lock.json
npm install
👉 依存関係が壊れている場合に有効
実務での使い分け
| 対応 | 使う場面 |
|---|---|
| --legacy-peer-deps | 開発・検証環境 |
| --force | 最終手段 |
| バージョン調整 | 本番・長期運用 |
| 再インストール | 環境崩壊時 |
学び
今回のエラーから得た学びは以下です。
- エラーメッセージはちゃんと読むとヒントがある
- 「とりあえず動かす」と「正しく直す」は分けるべき
- 依存関係は“コードと同じくらい重要”
まとめ
npm ERR! ERESOLVE unable to resolve dependency tree
は、
依存関係のバージョン競合エラー
です。
対応の優先順位は：
- とりあえず動かす →
--legacy-peer-deps - 根本解決 → バージョンを揃える
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！