Personal React app deployment fails on Vercel

Question

// error deploy to vercel
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @testing-library/react@13.4.0
npm ERR! Found: react@17.0.0
npm ERR! node_modules/react
npm ERR!   react@"^17.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.6
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.10.6" from the root project
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6
npm ERR!     node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^11.10.6" from the root project
npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
npm ERR!   22 more (@emotion/styled, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.4.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.0" 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 /vercel/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2023-04-23T19_05_45_098Z-debug-0.log
Error: Command "npm install" exited with 1`

I downgraded the React version from 18.2.0 to 17.0.0 and it still doesn't work

File package.json:

{
  "name": "popsocket",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.1",
    "@mui/styles": "^5.12.0",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.6",
    "classnames": "^2.3.2",
    "formik": "^2.2.9",
    "json-server": "^0.17.3",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "react-toastify": "^9.1.2",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.10",
    "web-vitals": "^2.1.4",
    "yup": "^1.1.1"
  },
  "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"
    ]
  }
}

Answer 1

No need to downgrade your React version - set it back to the version you have.

Open Vercel and go to the project where you are experiencing this problem.

On the top menu of the project, click Settings.

Scroll to Build and Development Settings.

Click the Override button on the install command and append --legacy-peer-deps. For example. Installation command: npm install --legacy-peer-deps.

Save changes and redeploy the project.