Material-ui: Cannot install @material-ui/core with npm 7 and React 17

[georgeiliadis91]

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: [email protected]
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/[email protected]
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 |

[eps1lon]

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.

[nandosangenetto]

@eps1lon
Does v5 already support it?

[eps1lon]

Does v5 already support it?

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?

[nandosangenetto]

@eps1lon, that's the result from npm --version:

$ npm --version
7.0.3

Btw, I'm not using create-react-app, I'm using [email protected] + [email protected].

[eps1lon]

npm@6 should install. The missing peer warning is safe for our case.

[georgeiliadis91]

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?

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 [email protected]

And it works fine now.

[Bird-Kid]

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:

npm install --save @material-ui/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! [...]
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.

Following the instructions I ran

npm install --save --legacy-peer-deps @material-ui/core

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" and react@"^17.0.1" at this point. Do proceed with caution until v5 (or potential official support in v4?) gets released.

[Maroa01]

Is there a way to add the Material-UI icons for react 17.01? Any suggestions?

[Bird-Kid]

Is there a way to add the Material-UI icons for react 17.01? Any suggestions?

You should be able to add @material-ui/icons using the same --legacy-peer-deps flag in npm v7:

npm install --save --legacy-peer-deps @material-ui/icons

Same disclaimer applies as in my post above: Material UI does not officially support React v17 yet, so use with caution.

[oliviertassinari]

@eps1lon To continue the discussion on https://github.com/mui-org/material-ui/pull/23367#issuecomment-720404626. Could a fresh install failing, using the latest version for all the dependencies (Material-UI v4, React, v17, npm v7) be a compelling reason enough to backport #23311 to v4?

[eps1lon]

I don't have confidence that v4 supports React 17 and we don't have the bandwidth to support it amidst work for v5. There should be some warnings that this is unsafe.

be a compelling reason enough to backport #23311 to v4?

The warning is a compelling reason not to do it. I have asked multiple times what the reason is for upgrading. So far nobody has explained why they need React 17 + Material-UI v4.

Maybe developers don't understand how (peer dependency) version ranges work? Might be worth asking npm to improve the error message by e.g. saying to install a compatible version instead of just failing. I understand that unactionable error messages are frustrating but in this example it's pretty clear that this is not a shortcoming of Material-UI but npm. Either shortcoming would be understandable since all of these conflicting versions are not even two weeks old.

[Bird-Kid]

So far nobody has explained why they need React 17 + Material-UI v4.

_New is always better._

Jokes aside:

I don't have confidence that v4 supports React 17 and we don't have the bandwidth to support it amidst work for v5. There should be some warnings that this is unsafe.

I feared as much, but I'm all for v5 getting all the attention. (AFAIK React 17 doesn't introduce many (if any) new features and focuses more on future ease of upgrading.)
I've updated my comments above to emphasize that --legacy-peer-deps is discouraged (although hopefully that was already obvious enough), but will leave them up if anyone is really eager to mix and match the two.

[oliviertassinari]

have asked multiple times what the reason is for upgrading.

@eps1lon I think that there is another side to the coin; developers upgrading is one thing, but what about developers starting a new project?

[eps1lon]

but what about developers starting a new project?

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.

(AFAIK React 17 doesn't introduce many (if any) new features and focuses more on future ease of upgrading.)

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.

[Dacker15]

When Material UI v5 stable will be released? Is there a date or a prevision?

[oliviertassinari]

@Dacker15 Upgrading to v5 isn't the only option. The stable version of v5 might still be 6 months ahead.