MUI installation doesn't work with React 18

user_15345255 0
Viewed 41373

i was trying to install material ui core and icons with my react 18.0 project but i can't.The project has been created using the latest create-react-app npm install @material-ui/core @material-ui/icons

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.

i deleted npm-cache folder and re install it still doesn't work

material-ui reactjs
12 Answers
user_142240000

You can use Materal UI v5 for reactjs 18

OR

There is another way to make work MUI with Reactjs is to degrade the version of react to 17.

You just need to degrade react version and react-dom version to 17 to make it work.

Check your package.json file there you will find react and react-dom version to 18 you have to degrade the version to make mui work properly with Reactjs.

Use --force flag while degrading to version 17

OR if you don't want to degrade you react 18 the follow below instruction.

For react >= 17.0.0 and react-dom >= 17.0.0 Use this. If you are using react version 17 or 18 then you must install Material UI (version) v5

Note: if anyhow MUI v5 does not work with react@17.0.x then install MUI (version) v4.

npm install @mui/material @emotion/react @emotion/styled

AND

For react >= 16.8.0 and react-dom >= 16.8.0 Use this.

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

// with yarn
yarn add @material-ui/core
user_178401290

Install it with npm install @mui/material @emotion/react @emotion/styled --force

user_147932230 
npm i @material-ui/core --legacy-peer-deps

Actual for 2022.04.24:

  • material-ui/core v4.12.4
  • react v18.0.0
user_49535530

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: https://namespaceit.com/blog/mui-installation-doesnt-work-with-react-18

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

try this-

npm install @material-ui/core --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps
user_171532900

You should use the new version of material UI with react 18

To install the new version with the following command:

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled
user_152994170

this worked for me npm install @mui/material @emotion/react @emotion/styled

user_194374790

I tried the below and it works for me.

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

I used with the --force flag and it worked for me

npm install @material-ui/core

user_151526870

I used this and it works for me:

npm i @material-ui/core
npm i @material-ui/icons --legacy-peer-deps

enter image description here

user_136133940

--legacy-peer-deps use this. or --force it has worked for me.

user_198880350
Related