When installing Material UI, I am prompted with a series of errors?

Viewed 3413

When I attempt to install Material UI using npm install @material-ui/core , I am prompted with many errors:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: portfolio@0.1.0
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
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.
npm ERR! 
npm ERR! See /Users/jordanhilado/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jordanhilado/.npm/_logs/2020-10-31T17_57_54_724Z-debug.log

How can I fix this?

2 Answers

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

Material UI does not officially support React v17 yet, so use with caution.

npm ERR! peer react@"^16.8.0" from @material-ui/core@4.11.0

This line here is giving you a hint as to what is going wrong.

@material-ui/core@4.11.0 is expecting a peer dependency for react to be within the current major version allowed (in this case it seems like they have not added support for React version 17 yet).

It looks like you are on the most recent major version of React 17.0.1. The most recent version of Material-UI will support react version below 17.0.0 currently.

See this other stack overflow for an explanation on what the '^' means in version numbers.

What's the difference between tilde(~) and caret(^) in package.json?

To get around this try downgrading React to version 16, at least until Material-UI adds support for version 17.

A side note: you may not need everything it comes with but create react app is a great way to get started on React projects and not really have to worry about versioning issues.

Related