Conflicting peer dependency: @types/react@17.0.50

Support
, ,
1

Please help. I am not sure how to resolve this issue. I am confused on why there is an issue with the dependencies.

4:34:22 PM: Build ready to start
4:34:37 PM: build-image version: a13ca271c42226d886b5d1dc0da3d70cb6ac0627 (focal)
4:34:37 PM: build-image tag: v4.11.0
4:34:37 PM: buildbot version: 28ac1cc020586b1ec2af1c1e9bb64025ce31310b
4:34:37 PM: Fetching cached dependencies
4:34:37 PM: Failed to fetch cache, continuing with build
4:34:37 PM: Starting to prepare the repo for build
4:34:37 PM: No cached dependencies found. Cloning fresh repo
4:34:37 PM: git clone https://github.com/calvintuantran/Iceberg-Store
4:34:37 PM: Preparing Git Reference refs/heads/master
4:34:38 PM: Parsing package.json dependencies
4:34:39 PM: Starting build script
4:34:39 PM: Installing dependencies
4:34:39 PM: Python version set to 2.7
4:34:39 PM: v16.17.1 is already installed.
4:34:39 PM: Now using node v16.17.1 (npm v8.15.0)
4:34:39 PM: Started restoring cached build plugins
4:34:39 PM: Finished restoring cached build plugins
4:34:39 PM: Attempting ruby version 2.7.2, read from environment
4:34:40 PM: Using ruby version 2.7.2
4:34:40 PM: Using PHP version 8.0
4:34:41 PM: No npm workspaces detected
4:34:41 PM: Started restoring cached node modules
4:34:41 PM: Finished restoring cached node modules
4:34:41 PM: Installing NPM modules using NPM version 8.15.0
4:34:41 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
4:34:41 PM: npm WARN config location in the cache, and they are managed by
4:34:41 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
4:34:41 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
4:34:41 PM: npm WARN config location in the cache, and they are managed by
4:34:41 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
4:34:43 PM: npm ERR! code ERESOLVE
4:34:43 PM: npm ERR! ERESOLVE could not resolve
4:34:43 PM: npm ERR!
4:34:43 PM: npm ERR! While resolving: @material-ui/styles@4.11.5
4:34:43 PM: npm ERR! Found: @types/react@18.0.21
4:34:43 PM: npm ERR! node_modules/@types/react
4:34:43 PM: npm ERR!   @types/react@"^18.0.17" from the root project
4:34:43 PM: npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
4:34:43 PM: npm ERR!   node_modules/@material-ui/types
4:34:43 PM: npm ERR!     @material-ui/types@"5.1.0" from @material-ui/styles@4.11.5
4:34:43 PM: npm ERR!     node_modules/@material-ui/styles
4:34:43 PM: npm ERR!       @material-ui/styles@"^4.11.5" from the root project
4:34:43 PM: npm ERR!   9 more (@mui/base, @mui/icons-material, @mui/material, ...)
4:34:43 PM: npm ERR!
4:34:43 PM: npm ERR! Could not resolve dependency:
4:34:43 PM: npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/styles@4.11.5
4:34:43 PM: npm ERR! node_modules/@material-ui/styles
4:34:43 PM: npm ERR!   @material-ui/styles@"^4.11.5" from the root project
4:34:43 PM: npm ERR!
4:34:43 PM: npm ERR! Conflicting peer dependency: @types/react@17.0.50
4:34:43 PM: npm ERR! node_modules/@types/react
4:34:43 PM: npm ERR!   peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/styles@4.11.5
4:34:43 PM: npm ERR!   node_modules/@material-ui/styles
4:34:43 PM: npm ERR!     @material-ui/styles@"^4.11.5" from the root project
4:34:43 PM: npm ERR!
4:34:43 PM: npm ERR! Fix the upstream dependency conflict, or retry
4:34:43 PM: npm ERR! this command with --force, or --legacy-peer-deps
4:34:43 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
4:34:43 PM: npm ERR!
4:34:43 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
4:34:43 PM: npm ERR! A complete log of this run can be found in:
4:34:43 PM: npm ERR!     /opt/buildhome/.npm/_logs/2022-10-01T23_34_41_775Z-debug-0.log
4:34:43 PM: Error during NPM install
4:34:43 PM: Build was terminated: Build script returned non-zero exit code: 1
4:34:43 PM: Creating deploy upload records
4:34:43 PM: Failing build: Failed to build site
4:34:43 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
4:34:43 PM: Finished processing build request in 6.545014911s
2

Here is my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@material-ui/styles": "^4.11.5",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.0",
    "@mui/styled-engine-sc": "^5.10.0",
    "@mui/styles": "^5.10.2",
    "@mui/system": "^5.10.0",
    "@tanstack/react-query": "^4.3.9",
    "@tanstack/react-query-devtools": "^4.3.9",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.48",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-query": "^3.39.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5",
    "typescript": "^4.7.4",
    "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"
    ]
  }
}
3