🐙

npm installでエラーが出た時の解決方法

2024/03/23に公開

React

npm

エラー

tech

現在、reactを勉強しています。

npm installでモジュールをインストールする際にエラーでインストールできなかったため、調べた内容を備忘録として残しておきます。

結果、受講している講座で使用しているダウングレードして使用しているreactのバージョンとインストール済みのバージョンが異なることにより起きたエラーでした。

今回は、競合する依存関係を解決できる環境ではないと仮定して解決方法をまとめました。

インストールしたいモジュール

npm i sass

エラーメッセージ

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @testing-library/react@13.4.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.2" from react-dom@17.0.2
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^17.0.2" from the root project
npm ERR!   peer react@">= 16" from react-scripts@5.0.1
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! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.4.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.0" 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:
...

解決方法

'--legacy-peer-deps'オプションを使用してインストールします。

'--legacy-peer-deps'オプションを使用してコマンドを実行すると、競合する依存関係※を無視してインストールを進めることができます。

※今回のケースでは、Reactのバージョン18と講座で使用している17.0.2が競合していました。

npm i sass --legacy-peer-deps

'--legacy-peer-deps'オプションを使用するメリット

エラーメッセージにもあるように、実は、'--force'オプションを使用してもインストールは可能です。

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.

'--force'オプションでは、依存関係の競合やその他のエラーを無視してパッケージのインストールを強制的に進めることができます。

そのため、必要なパッケージをすぐにインストールして開発を進めることができる反面、依存関係の競合が原因の問題やパッケージ間の依存関係が壊れる可能性があり、正常に動作しなくなるリスクがあります。

一方、'--legacy-peer-deps'オプションは、依存関係の競合を警告として扱うだけで、プロジェクトの他のパッケージのインストールが妨げられることはありません。依存関係の競合は解決されませんが、比較的安全な方法といえます。

まとめ

Reactでnpmモジュールをインストールする際のエラー解決方法についてまとめました。同じような状況で困っている方の参考になれば嬉しいです。