Posted inReact プログラミング

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

[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が簡単で問題ないと思います。
Tags: