Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to install mui 5 in a project with react@16.12 ? I have added peerDependencies script in my package.json file, Still I am getting waring to add it

I tried some solutions on stackOverFlow and youTube about peerDependencies. One of them was add a peerDependency in package.json file. Following is my package.json file

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "peerDependencies": {
    "react": "^17.0.0",
    "@babel/core": "^7.13.0",
    "react-dom": "^17.0.0",
    "typescript": "3.2.0-dev",
    "fsevents": "1.2.13"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.8",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

After I did npm install, still I am getting this error "WARN @mui/material@5.11.8 requires a peer of react@^17.0.0 || ^18.0.0 but none is installed. You must install peer dependencies yourself."
My questions are :

  1. How to install peer dependency by yourself means ? I have already added it to package.json. How to add it when there is already react 16.12 running ?
  2. I don’t want to use mui version 4, Isn’t there other ways to club react 16.12 and Material UI 5 ?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

  1. How to install peer dependency by yourself means ? I have already added it to package.json. How to add it when there is already react 16.12 running ?

A peer dependency specifies that our package is compatible with a particular version of an npm package.
peerDependencies are not automatically installed. You need to manually modify your package.json file in order to add a Peer Dependency.

Source: Difference between dependencies, devDependencies and peerDependencies

Using --legacy-peer-deps will usually allow you to install the package without meeting the peer dependency requirements. If that doesn’t work, --force will install without regard to peer dependencies.

Source: How can I make npm install package and ignore one (or all) peer dependencies?

So, You can do:

npm install @mui/material@5 --legacy-peer-deps

Or

npm install @mui/material@5 --force

  1. I don’t want to use mui version 4, Isn’t there other ways to club react 16.12 and Material UI 5 ?

No, You have to upgrade React version, or just ignore the peer dependency requirements warning.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading