Home > Software engineering >  Having problems with Material UI installations and React v. 18.2
Having problems with Material UI installations and React v. 18.2

Time:08-24

I'm trying to experiment with Material UI but running into problems with React v.18.2. I need to import the following:

import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'

But when I run npm install @material-ui/styles, I get this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.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/[email protected]
npm ERR! node_modules/@material-ui/styles
npm ERR!   @material-ui/styles@"*" 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 have tried running the following, per this SO answer, and they did install but that has not helped any:

npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
npm install @mui/icons-material@latest

Here are my dependencies.

  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-geolocated": "^4.0.3",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Bottom line: What do I need to do to be able to import what I need?

CodePudding user response:

You can try yarn.

yarn add @material-ui/styles

Also you can install it by using --force.

npm i -f @material-ui/styles

It worked for me

CodePudding user response:

You have dependency conflict (incorrect and potentially broken dependency) as it says, so try to run the command with --force, or --legacy-peer-deps.

  • Related