Material UI installation doesn't work with React 18

Question

I was trying to install Material UI 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

Give a try with yarn add, also are you install MUI version < 5 — maazakn, Apr 01 '22 at 22:15

score 75 · Answer 1 · answered Apr 02 '22 at 12:34

75

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

Github Issue : https://github.com/mui/material-ui/issues/32074

answered Apr 02 '22 at 12:34

NavinKumarmMNK

883
3
7

3

Worked like a charm. What hides behind the --legacy-peer-deps command? – dani_l_n Oct 06 '22 at 14:51
3

"--legacy-peer-deps restores peerDependency installation behavior from NPM v4 thru v6 One way of thinking of this flag is that it isn't doing something new; rather it's telling NPM not to do something new, since NPM v7 now installs peerDependencies by default." source: https://stackoverflow.com/a/66620869 – William Ashford Dec 19 '22 at 22:21
1

You can do this locally but it will create issues on live environment – Wasim Apr 04 '23 at 17:04

score 10 · Answer 2 · edited Jan 06 '23 at 16:11

You can use Materal UI v5 for reactjs 18

https://mui.com/material-ui/getting-started/installation/

OR

There is another way to make MUI work 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 v4 work with Reactjs.

Use --force flag while degrading to version 17

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

For react >= 17.0.0 and react-dom >= 17.0.0 Use MUI v5.

If you are using react version greater than 17 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 then use this.

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

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

refer to MUI docs v4 and v5 [here](https://mui.com/material-ui/getting-started/installation/) — sarfaraj shah, Sep 19 '22 at 05:29

score 7 · Answer 3 · answered Apr 23 '22 at 21:27

7

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

Actual for 2022.04.24:

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

answered Apr 23 '22 at 21:27

Alex

513
5
5

1

How is this any different from the other answers already posted? – AndreFeijo Oct 18 '22 at 06:23

score 5 · Answer 4 · answered Apr 02 '22 at 08:09

5

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

answered Apr 02 '22 at 08:09

Arya Anish

578
1
7
18

score 4 · Answer 5 · answered Apr 06 '22 at 13:43

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

score 3 · Answer 6 · edited Aug 22 '22 at 20:58

3

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

npm install @material-ui/core

edited Aug 22 '22 at 20:58

Tamir Abutbul

7,301
7
25
53

answered Apr 23 '22 at 16:10

Jayant Verma

31
2

score 3 · Answer 7 · answered Jun 25 '22 at 13:57

3

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

answered Jun 25 '22 at 13:57

Mohammad Reza Salemi

103
8

score 1 · Answer 8 · answered Mar 30 '23 at 14:47

1

Use this link: https://mui.com/material-ui/getting-started/installation/ To find the Material UI version for react 18 Installation: npm install @mui/material @emotion/react @emotion/styled

answered Mar 30 '23 at 14:47

Jemimah Mmboga

31
3

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34135517) – user16217248 Apr 05 '23 at 02:23

Lin Du · Answer 9 · 2023-07-13T02:14:05.140

@material-ui/core@4.12.3 is incompatible with React 18.x and it has been deprecated. Please use MUI v5

Let's check the peer dependencies of MUI v4:

$ npm view @material-ui/core@4.12.3 peerDependencies
{
  '@types/react': '^16.8.6 || ^17.0.0',
  react: '^16.8.0 || ^17.0.0',
  'react-dom': '^16.8.0 || ^17.0.0'
}

As you can see, MUI v4 work with React ^16.8.0 or React ^17.0.0. But in your project, the React version is ^18.0.0 which is incompatible.

Related issue:

The MUI v5.6.0 started to support React 18, the latest version is 5.13.6(until 2023.7.4). So you can install the latest version.

Material UI installation doesn't work with React 18

9 Answers9

You can use Materal UI v5 for reactjs 18

Linked