Fix:”MUI installation doesn’t work with React 18″ Error

In My React App version 18.0, I was trying to Install the Material UI core and icons, but failed. I used the latest create-react-app  to create the project using the below command:

npm install @material-ui/core @material-ui/icons

When I am using the above “npm install @material-ui/core @material-ui/icons” command, below error is shown:

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.

As a first aid, even I tried to delete the “npm-cache” folder and re-installed it but still not working.

How to fix the “MUI installation doesn’t work with React 18” Error?

To fix the MUI installation doesn’t work with React 18 Error, either upgrade to the latest MUI version or use the command “legacy-peer-deps” to fix the issue and error MUI installation doesn’t work with React 18 will be resolved.

Below are all possible ways to fix the error MUI installation doesn’t work with React 18:

Solution 1: Use the “legacy-peer-deps” command

This MUI issue MUI installation doesn’t work with React 18 is seen with the new React version 18. Basically it is the compatibility issue with React latest version 18.0 and MUI version.

MUI technical team is aware about the issue and have release the latest version to fix the error MUI installation doesn’t work with React 18.

As of now, to solve the issue, use the “legacy-peer-deps” attribute using the below command:

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

OR

Solution 2: Update to the Latest MUI Version

MUI’s latest version has been released by the team, download the latest version from https://mui.com/versions/ official website.

This will fix your issue means MUI installation now works with React version 18.

Conclusion

“MUI installation doesn’t work with React 18” Error is seen basically because of React version upgrade to 18. Basically it is the compatibility issue with React latest version 18.0 and MUI version.

To fix the error, “MUI installation doesn’t work with React 18”, as error itself showing to either use “legacy-peer-deps” OR ” –force” to solve the issue.

Now MUI’s latest version has been released by team, download latest version from https://mui.com/versions/ official website to fix the issue. Hope it would help you to fix the MUI installation incompatibility with React version 18.