コーポレートエンジニアの私は普段Web開発なんてしないのですが、「React x TypeScriptで開発してみたい！」と唐突に思いまして、某学習サービスで買った教材を見ながら試しに始めてみた矢先。
npm add @material-ui/icons@4.11.3
> ERESOLVE unable to resolve dependency tree...割と最初の方からつまずきました。悲しい。
エラーの要因等について調べたので、同じエラーが出ている方の一助になれば幸いです。
エラーの経緯
今回の小さな目的としては、Material-UIのmaterial-ui/iconsを使うためReactに入れること。
そこでまずは、最新のmaterial-ui/iconsのバージョンを検索しました。
$npm info @material-ui/icons
> @material-ui/icons@4.11.3 | MIT | deps: 1 | versions: 56...ふむ、最新は4.11.3なのか。ということで、以下を実行。
npm add @material-ui/icons@4.11.3
> ERESOLVE unable to resolve dependency tree...と、こうなったわけです。
結論
まず結論としては、@material-uiを入れようとしたのが間違いで、React 18に対応したMaterial-UIは@mui/materialという名前になったようです。最新の名前できちんとインストールするのが正解です。
@material-uiでもコマンドに--legacy-peer-depsを入れて再実行すれば一応コマンドは通るのですが、本来望ましい形式ではないようですね。
とにもかくにも、公式リファレンスをまず読むのが最優先です。
Material UI: Getting started – Installation
以降は私が調べたりしながら試したことをさっくりとまとめます。
エラーの内容の確認
まずはエラーの内容について。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: questionnaire_form@0.1.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!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"4.12.4" from the root project
npm ERR! peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3
npm ERR! node_modules/@material-ui/icons
npm ERR! @material-ui/icons@"4.11.3" 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/username/.npm/_logs/2023-12-18T13_40_36_053Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/username/.npm/_logs/2023-12-18T13_40_36_053Z-debug-0.logどうやら依存関係を解決できていない様子です。
Reactのバージョンは18.2.0で、そのバージョンにmaterial-uiがあっていないと。
最新同士じゃダメ…？
ちなみに、npm installでもダメでした。
まずやった（よくない）こと: –legacy-peer-depsを加えて再実行
エラー内容にあるとおり、–legacy-peer-depsをコマンドに入れて再実行してみるのが一番よくある対処法のようです。
$ npm add --legacy-peer-deps @material-ui/icons@4.11.3
up to date, audited 1531 packages in 4s
251 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.これでうまくいったみたいです。
ただ、これは本来望ましい形のインストールではありませんでした。
そもそも最新同士でおかしいって何か別問題があるのでは？
なんかおかしいと思って調べてみたところ、React 18に対応するMaterial-UIは@material-uiではなく、@mui/materialとのこと！
つまり私は名称変更前の最新版を取得しようとしていたようです。当然適切ではありませんね。
次にきちんと解決できた方法をまとめます。
やってみた（うまくいった）方法: @mui/materialをインストール
ではうまくいった方法です。
古い方を削除して、正しい（新しい）方をインストールしなおします。
間違って入れた@material-uiを削除
まずは間違って入れてしまった@material-uiを消します。
$ npm uninstall @material-ui/core同様に@material-ui/iconとか諸々間違って入れたものをアンインストールしました。
多分$npm rmとかでもいけます。
適切な名称でインストールする
次にReact 18に対応した@mui/materialをインストールします。
$ npm add @mui/material @emotion/react @emotion/styled
> up to date, audited 1550 packages in 1s
255 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つの脆弱性？6 high、だと……？いつか調べます。）
これで完了です。
まとめ
こういう問題はReact初心者ぐらいしか引っかからないとは思いますが、自分自身へのひとつの教訓として残しておきたいと思い本ページにまとめました。
教材を忠実に実行してとりあえず全体像を掴むのを大切だけど、やっぱりきちんと進めるなら公式リファレンスを読むのは必要不可欠。
変に手順が通ってレガシーな構築をしていたら、せっかくの学びが勿体無いですよね。
一旦は解決できたし、明日からReactライフを満喫しようと思います！！
