はじめに

Laravel×reactで開発を行っていて、「npm install 〜」でパッケージをインストールしようとしたら、以下のエラーとに遭遇しました。
参考になれば幸いです。

エラー内容

npmでreactパッケージをインストールしてみようとすると、

ターミナル

***@*** docker-laravel % docker-compose exec web npm i --save mapbox-gl @mapbox/mapbox-gl-language react-mapbox-gl react-mapbox-gl-language
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: mapbox-gl@0.29.0
npm ERR! node_modules/mapbox-gl
npm ERR!   mapbox-gl@"*" from the root project
npm ERR!   peer mapbox-gl@"^0.29.0" from @mapbox/mapbox-gl-language@0.9.2
npm ERR!   node_modules/@mapbox/mapbox-gl-language
npm ERR!     @mapbox/mapbox-gl-language@"*" from the root project
npm ERR!     peer @mapbox/mapbox-gl-language@"^0.9.0" from react-mapbox-gl-language@1.0.1
npm ERR!     node_modules/react-mapbox-gl-language
npm ERR!       react-mapbox-gl-language@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer mapbox-gl@"^0.39.1" from react-mapbox-gl-language@1.0.1
npm ERR! node_modules/react-mapbox-gl-language
npm ERR!   react-mapbox-gl-language@"*" 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 /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-11-16T14_24_44_936Z-debug.log

これは、reactのバージョンとインストールしようとしているパッケージのreact推奨バージョンが違う際に発生するようです。

対処法

エラー文によると、installの際に--legacy-peer-depsを追加することで強制的にインストールできるみたいです。

ターミナル

npm ERR! this command with --force, or --legacy-peer-deps

実行結果

ターミナル

***@*** docker-laravel % docker-compose exec web npm i --legacy-peer-deps --save mapbox-gl @mapbox/mapbox-gl-language react-mapbox-gl react-mapbox-gl-language

added 8 packages, and audited 1214 packages in 16s

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

25 vulnerabilities (14 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

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

Run `npm audit` for details.

今回は「ERESOLVE unable to resolve dependency tree」エラーの対処法についてまとめてみました。

エラーの際はびっくりしますが、エラー分の中に正解はあります。
参考になれば幸いです。