[React / Next.js / Error] MUIインストール時にERESOLVE unable to resolve dependency tree エラー

概要

Reactに様々なUIを利用できるMUIをインストールしようとしたら
『ERESOLVE unable to resolve dependency tree』エラーが発生して失敗しました。
それで発生したエラーと対応をまとめました。

開発環境

React 19.0.0-rc-69d4b800-20241021
Next.js 15.0.1
MUI 6.1.6

エラー内容

作成中のプロジェクトにMUIをまとめてインストールするために
次のコマンドを実行しました。

Command Prompt

# 入力コマンド
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

すると次のエラーが発生しました。

Command Prompt

# 実行結果
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: (プロジェクト名)
npm error Found: react@19.0.0-rc-69d4b800-20241021
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/material@6.1.6
npm error node_modules/@mui/material
npm error   @mui/material@"*" from the root project
npm error
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 (レポートファイルパス)

styled-components (2024/11/06更新)

styled-componentsのインストールでも同じエラーが発生しました。
それでMUIだけではなくstyled-componentsなど様々なモジュールのインストールで同じく対応できます。

参考

原因

エラーの原因は最新バージョンのMUIが開発環境のReactのバージョンでは対応できないことでした。
エラー内容から
Reactバージョンは『 19.0.0-rc-69d4b800-20241021 』ですが、
mui/material@6.1.6 は『 ^17.0.0 || ^18.0.0 || ^19.0.0 』などで対応できるとなっています。

Command Prompt

# 実行結果
....(中略)....

<Reactバージョン情報>
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project

....(中略)....

<mui/material対応可能Reactバージョン>
npm error peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/material@6.1.6

....(中略)....

対応としては次に2つの方法がありましてその内どちらでも選択して対応できます。
1. MUIインストール時にPeer dependenciesを無効化
2. ReactのバージョンをMUIが対応できるバージョンに変更

対応

方法1 –legacy-peer-depsオプションでインストール

npm install の次に --legacy-peer-deps オプションを追記して、
次のコマンドを実行します。

Command Prompt

# 入力コマンド
npm install --legacy-peer-deps @mui/material @mui/icons-material @emotion/react @emotion/styled

実行して次のように結果が表示されたら成功です。

Command Prompt

# 実行結果
added 55 packages, and audited 424 packages in 25s

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

found 0 vulnerabilities

方法2 Reactバージョンを変更

今回は React 19.0.0-rc-69d4b800-20241021を React 18.2.0に変更します。
※ React 18.2.0 にした理由は開発環境の Next.js 15.0.1 と mui/material@6.1.6 の
　両方で対応できるバージョンだからです。
　 Next.js、mui/materialのバージョンに合わせて
　 Reactのバージョンを決めてください。

package.jsonの dependencies内のreact、react-domのバージョンを18.2.0に修正します。

package.json

  ....(中略)....
  
  "dependencies": {
    "next": "15.0.1",
    "react": "18.2.0",         ← 値を"18.2.0"に変更
    "react-dom": "18.2.0"      ← 値を"18.2.0"に変更
  },
  
  ....(中略)....

次のファイル、フォルダを削除します。
1. node_modules フォルダ
2. package-lock.json

次のコマンドで再設定、再インストールを行います。

Command Prompt

# 入力コマンド
npm install

次の結果が表示されて、node_modules フォルダとpackage-lock.jsonが
作成されていることを確認できれば成功です。

Command Prompt

# 実行結果
added 368 packages, and audited 369 packages in 33s

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

found 0 vulnerabilities

それで最初に失敗したMUIインストールコマンドを実行すると成功になります。

Command Prompt

# 入力コマンド
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Command Prompt

# 実行結果
added 55 packages, and audited 424 packages in 25s

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

found 0 vulnerabilities

まとめ

今回はMUIをインストール時に発生したエラーを対応する手順を作成しました。
対応方法は2つを紹介しましたが、
基本的にはオプションを追記する対応1が簡単で問題ないと思います。