material-ui: Cannot install @material-ui/core with npm 7 and React 17
On the base template of create-react-app v4 with typescript material-ui/core complains about the version of react.
Steps to Reproduce 🕹
Step 1: Run - npx create-react-app . --template typescript Step 2: Run - npm i @material-ui/core
Error fron console
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @material-ui/core@4.11.0
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"*" from the root project
- [ x] I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
material ui core does not install
Expected Behavior 🤔
isntall material-ui core
Your Environment 🌎
Fresh linux Ubuntu installation. 20.10
| Tech | Version |
|---|---|
| Material-UI | default LTS |
| React | 17.0.1 |
| TypeScript | true |
| Node | 15.0.1 |
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 27
- Comments: 27 (12 by maintainers)
I encountered the same error the other day (also after scaffolding via CRA & TypeScript as seen in OP). Using npm v7.0.3 does yield additional output:
Following the instructions I ran
and Material UI installed fine without downgrading npm or React.
DISCLAIMER: Use at own risk. Things may break. Material UI v4 does not officially support React v17. You’re encouraged to either switch to React v16 or wait for Material UI v5.
I’ve only tested a few components and features. Everything seems fine so far, but I don’t know whether there are any lurking compatibility issues between
@material-ui/core@"v4.11.0"andreact@"^17.0.1"at this point. Do proceed with caution until v5 (or potential official support in v4?) gets released.i think create-react-app is now defaulting to react v17, and it looks from above like nextJS does too. so expect a lot more duplicated issues I guess?
We need to use
react@17.0.2because it is required by Next.js version v11.0.0. Are there any short term plans to support that?v4 does not officially support react 17 as of yet. You should see a missing peer dependency warning. Until the next v4 feature release you should downgrade to react 16.
@eps1lon I think that there is another side to the coin; developers upgrading is one thing, but what about developers starting a new project?
You should be able to add
@material-ui/iconsusing the same--legacy-peer-depsflag in npm v7:Same disclaimer applies as in my post above: Material UI does not officially support React v17 yet, so use with caution.
Technically v4 and v5 should support it. We’re running tests with React 17 every day so we’re notified once something breaks.
We just haven’t updated the peer version yet because, well, react 17 was just released.
We’ll fix this for v5 in the next release. For v4 we’ll discuss if it makes sense to cut a feature release yet. That might include a bunch of deprecation warnings though. So if you’re just concerned with peer warnings you might not want to update.
You might also want to re-evaluate if you want to upgrade to React 17 yet. It doesn’t have that many new features/bug fixes and the ecosystem might take a while until everything "just works"™
On a different note: I think this error is caused by npm 7 not create-react-app. @nandosangenetto Could you post the results of
npm --version?@eps1lon
In our case one of the reasons updating to React 17 was NextJS (+Webpack5)
npm@6should install. The missing peer warning is safe for our case.https://github.com/mui-org/material-ui/releases/tag/v4.11.2 should help
Solved the case: Thank you
I am on npm version 7 as well.
EDIT: but even after downgrading to lts node 14.* and npm 6.* the issue persists. Lowering react version should do the trick.
EDIT2 /UPDATE: So even after down-grading the react version due to react-scripts on create-react-app it keeps updating the version to 17. So node and npm versions have nothing to do with it.
A quick way would be to downgrade create-react-app uptil the PR request goes live. I run
npm install --save --save-exact react-scripts@3.4.4And it works fine now.
@oliviertassinari sorry for the confusion. I got the following error but I think there was something mixed up with my dependencies. After removing
node_modulesandpackage-lock.jsonI was able to run npm install without any issues.npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.11.4 npm ERR! node_modules/@material-ui/core npm ERR! @material-ui/core@"^4.11.4" from the root project 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@"^4.11.2" from the root project npm ERR! 1 more (@material-ui/lab) npm ERR! 24 more (@material-ui/icons, @material-ui/lab, ...)I use following versions: “@material-ui/core”: “^4.11.4”, “@material-ui/icons”: “^4.11.2”, “@material-ui/lab”: “^4.0.0-alpha.58”, “react”: “^17.0.2”,
We already had 3 duplicated issues. I would be in favor of applying https://github.com/mui-org/material-ui/issues/23706#issuecomment-733605597 & #23697. For instance, having more developers using React 17 and learning more about the potential problems it creates, will help us fix them in v5 sooner.
@Dacker15 Upgrading to v5 isn’t the only option. The stable version of v5 might still be 6 months ahead.
They will see the warning. I’m just completely lost what your thought process is here. So we have this untested combination that already had 2 obscure bugs. We don’t have time to support twice as many releases. And you just want to remove the warning to gain what?
The bad warning is an npm issue. npm 6 and yarn 1/2 correctly show that the peer version is wrong upon investigation (which is common in the npm ecosystem) you see that we support 16. So you downgrade.
Which is my point. Nobody is telling you to upgrade and if you can’t resist hype then this is your problem not ours. Even more so: it’s our responsibility to slow down this hype since we as library maintainers want to ship useful productions not sell some teleshopping-hype. It’s a really poor state of affairs if we have to hype releases without any substantial features.