[Solved] MUI installation doesn't work with React 18
React JS
Faysal Shuvo
Problem:
In my react 18 app, I was trying to install material UI core and icons. I was using this:
npm install @material-ui/core @material-ui/icons
but this is giving me the error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: client@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.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.3
npm ERR! node_modules/@material-ui/core
npm ERR! peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.2
npm ERR! node_modules/@material-ui/icons
npm ERR! @material-ui/icons@"*" 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.
This is how you solve MUI installation that doesn't work with React 18.
Solution:
This is MUI's problem with the new version of react. They are working to release a new version of Material UI. in the meantime we can solve this problem by using --legacy-peer-deps. This is how:
npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps
Hope this solves your problem. If you have any type of queries you can comment below.