株式会社ライブキャストロゴ 株式会社ライブキャスト

ERESOLVE unable to resolve dependency treeの解決方法はケースバイケース

2024年12月20日 javascript, React
シェア

MacでReactのプロジェクトを作成しようとした際に

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error react@”^19.0.0″ from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@”^18.0.0″ from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error @testing-library/react@”^13.0.0″ from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with –force or –legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error ホームディレクトリ/.npm/_logs/2024-12-19T05_23_25_388Z-eresolve-report.txtnpm error A complete log of this run can be found in: ホームディレクトリ/.npm/_logs/2024-12-19T05_23_25_388Z-debug-0.log
npm install –no-audit –save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

というエラーが発生したので調べながら解決したのですが、”ERESOLVE unable to resolve dependency tree”は依存関係の問題なので、絶対的な解決方法がある訳ではなく、発生している依存関係の問題の性質に応じて「対応はケースバイケース」となります。

とはいえ一応解決できたので、一例として挙げておきたいと思います。

Reactの環境を整える

前提として手順を簡単にまとめます。

  1. Node.jsのインストール
  2. npmの（バージョン）確認
  3. Reactプロジェクトの作成

という流れの中で発生したエラーでした。

Node.jsのインストール

Node.js公式サイトから最新のLTS版をダウンロードしてインストールします。
私の環境ではインストール済でしたので手順の説明は割愛します。
インストーラーの指示に従ってください。

npmの（バージョン）確認

Node.jsに付属しているnpm（Node Package Manager）のバージョンを確認します。

npm -v

バージョンが確認できればOKです。

Reactプロジェクトの作成

ターミナルからプロジェクトを作成したいディレクトリに移動して、以下のコマンドでReactアプリを作成します。

npx create-react-app my-app

npxとは？

Node.jsに付属するnpmの一部で、コマンドラインツールとして利用されるツールです。create-react-appを指定するとReactプロジェクトを素早くセットアップすることができます。

  • my-app

この部分はプロジェクトの名前で、my-appというディレクトリが作成され、その中にReactプロジェクトのファイルが一式作成されます。
このコマンドを実行すると途中まで進んだものの、最後の段階でエラーが発生するという状況でした。

対応内容について

エラーメッセージによると、

npm error node_modules/react
npm error react@”^19.0.0″ from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@”^18.0.0″ from @testing-library/react@13.4.0

react@19.0.0と@testing-library/react@13.4.0の依存関係のバージョンが競合しているようです。この問題を解決するために、いくつかの方法を試してみました。

package.jsonの記述を修正

まずは「react@”^19.0.0″」の記述を探しました。
途中まで作成されたプロジェクト内のpackage.jsonの中に記述がありました。

"react": "^19.0.0",
"react-dom": "^19.0.0",

の部分の”19″の記述を”18″に直しました。

"react": "^18.0.0",
"react-dom": "^18.0.0",

reactとreact-domをインストール

続いて、reactとreact-domをインストールし直します。

npm install react@18 react-dom@18
added 1 package, changed 4 packages, and audited 1322 packages in 3s

265 packages are looking for funding
run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix –force

Run `npm audit` for details.

“8 vulnerabilities (2 moderate, 6 high)”が気になります。

セキュリティの脆弱性（中程度2件、重大6件）が報告されていますが、ひとまず先に進めることにします。

他の依存関係も手動で再インストール

エラーメッセージの一番下の行に、

npm install –no-audit –save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

failedとあり失敗しているようなので、@testing-library/react@13.4.0とその他の依存関係も手動で再インストールします。

npm install –save @testing-library/react@13.4.0 @testing-library/jest-dom@5.14.1 @testing-library/user-event@13.2.1 web-vitals@2.1.0
npm warn deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 52 packages, and audited 1374 packages in 1s

269 packages are looking for funding
run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
npm audit fix –force

Run `npm audit` for details.

非推奨（deprecated）の警告が表示されていますが、まずは最初に発生した依存関係のエラーの解決を優先して進めていきます。

my-appディレクトリに移動して、

npm start

コマンドを実行してみます。

うまくいきました！

まとめ

今回発生した”ERESOLVE unable to resolve dependency tree”エラーの解決手順は以下の通りでした。

  1. package.jsonでReactのバージョンを18に修正
  2. reactとreact-domを再インストール（バージョン18指定）
  3. その他の依存関係（テストライブラリなど）を手動で再インストール

このように、依存関係の問題は各パッケージのバージョンを適切に調整することで解決できる場合があります。ただし、これは今回のケースでの解決例であり、異なる状況では別のアプローチが必要になる可能性があることに注意が必要です。

関連記事

«