１．実現したいこと
React（バージョン18）にて、Material-UIをインストールしたい。
ターミナルにて下記コマンドを実行した。
npm install --save @material-ui/core @material-ui/icons @material-ui/system
２．エラー内容
コマンド実行後、下記エラーが出る。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-chat@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.3.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! See /Users/shiho/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/shiho/.npm/_logs/2022-06-25T03_43_26_604Z-debug-0.log
３．調査
以下のワードでググる
- react18 material-ui
４．原因
material-uiがReactバージョンの18に対応していない模様。
MUI installation doesn't work with React 18 - Stack Overflow
５．解決策
Reactのバージョンを18→17に変更し、Material-UIを再インストール。
-
package.jsonのバージョンを修正
package.json
{
"react": "^17.0.2",
"react-dom": "^17.0.2",
}
-
@testing-library/を削除
package.json
{
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
}
-
package-lock.jsonとnode_modulesを削除
-
下記コマンドを実行
npm install