Unable to install @mui/x-data-grid in react-CodePudding

npm install @mui/x-data-grid

throws an 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.0.0" from the root project
npm ERR!   peer react@"^17.0.0 || ^18.0.0" from @mui/[email protected]
npm ERR!   node_modules/@mui/material
npm ERR!     @mui/material@"^5.6.0" from the root project
npm ERR!     peer @mui/material@"^5.2.8" from @mui/[email protected]
npm ERR!     node_modules/@mui/x-data-grid
npm ERR!       @mui/x-data-grid@"*" from the root project
npm ERR!   4 more (@emotion/react, @emotion/styled, react-dom, @mui/system)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from @mui/[email protected]
npm ERR! node_modules/@mui/x-data-grid
npm ERR!   @mui/x-data-grid@"*" 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 C:\Users\01kar\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\01kar\AppData\Local\npm-cache\_logs\2022-04-06T12_50_46_543Z-debug-0.log

What I think is that there is some version mismatch in the dependencies. New to react so can't understand the dependencies. Please give a step by step process to resolve this error.

{
  "name": "highradius",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/base": "^5.0.0-alpha.75",
    "@mui/material": "^5.6.0",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is the package.json file. I tried installing npm install @mui/material @emotion/react @emotion/styled and it was installed successfully now I am trying to install data grid but its showing me this error.

CodePudding user response：

Based on @mui/x-data-grid's documentation, it looks like this snippet of code should fix this issue

"peerDependencies": {
  "@mui/material": "^5.0.0",
  "react": "^17.0.0"
},

CodePudding user response：

npm i @mui/x-data-grid --legacy-peer-deps

Installing using this solved the issue for me.