material-ui: MUI installation doesn't work with React 18
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Installation doesn’t work with current React 18.0.0 version using npm. See the error below. The project has been created using the latest create-react-app. Installation works when using yarn.
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: carshop@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! peer react@“>=16.8.0” from @emotion/react@11.8.2 npm ERR! node_modules/@emotion/react npm ERR! @emotion/react@“^11.8.2” from the root project npm ERR! peerOptional @emotion/react@“^11.5.0” from @mui/material@5.5.3 npm ERR! node_modules/@mui/material npm ERR! @mui/material@“^5.5.3” from the root project npm ERR! 1 more (@mui/icons-material) npm ERR! 1 more (@emotion/styled) npm ERR! 1 more (@emotion/styled)
Expected behavior 🤔
Component should be installed.
Steps to reproduce 🕹
Steps:
- npx create-react-app myproject
- npm install @mui/material @emotion/react @emotion/styled
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.55)
npmPackages:
@emotion/react: ^11.8.2 => 11.8.2
@emotion/styled: ^11.8.1 => 11.8.1
@mui/icons-material: ^5.5.1 => 5.5.1
@mui/material: ^5.5.3 => 5.5.3
@mui/types: 7.1.3
@types/react: 17.0.43
react: ^18.0.0 => 18.0.0
react-dom: ^18.0.0 => 18.0.0
typescript: 4.6.3```
</details>
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 4
- Comments: 44 (10 by maintainers)
We are going to release a new version of Material UI later today. It will be possible to use it with React 18.
Maybe you should try
npm install @mui/material @emotion/react @emotion/styled --legacy-peer-depsAlmost there… #32131
Next JS + @material-ui/core + React 18, doesn’t have a solution yet, right?
@jagribble no, we don’t have such plans.
All Good Now! This is working - npm install @mui/material @emotion/react @emotion/styled
Thanks!
I think it isn’t… having the same issue…
v 5.6.0 seems to be released now. Works perfectly. Thank you!
Hello I am facing same issue as mentioned above.
Installation doesn’t work with current React 18.0.0 version using npm. See the error below. The project has been created using the latest create-react-app using npx.
code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: web_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! peer react@“>=16.8.0” from @emotion/react@11.8.2 npm ERR! node_modules/@emotion/react npm ERR! peerOptional @emotion/react@“^11.5.0” from @mui/material@5.5.3 npm ERR! node_modules/@mui/material npm ERR! @mui/material@“" from the root project npm ERR! peer @emotion/react@“^11.0.0-rc.0” from @emotion/styled@11.8.1 npm ERR! node_modules/@emotion/styled npm ERR! peerOptional @emotion/styled@“^11.3.0” from @mui/material@5.5.3 npm ERR! node_modules/@mui/material npm ERR! @mui/material@"” from the root project npm ERR! 1 more (@emotion/styled) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@“^17.0.0” from @mui/material@5.5.3 npm ERR! node_modules/@mui/material npm ERR! @mui/material@“*” from the root project
@mui/styles is not compatible with React 18 (see https://mui.com/system/styles/basics/). If you need to continue using it, you have to stick with React 17.
If you have React 18, you must use the
@mui/materialpackage (v5), not@material-ui/core(v4).between this and your other answer just above, that’s maybe something worth noting on https://mui.com/material-ui/migration/migration-v4/#material-ui-v5-and-mui-styles which makes folk install
@mui/styles- I could have skipped a step and use@mui/systemstraight away when migrating from material-ui-v4 😄Still waiting…