Le déploiement de l'application Personal React échoue sur 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`

J'ai rétrogradé la version React de 18.2.0 à 17.0.0 et ça ne fonctionne toujours pas

Fichier 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

Pas besoin de rétrograder votre version de React : rétablissez-la sur la version que vous possédez.

Ouvrez Vercel et accédez au projet où vous rencontrez ce problème.

Dans le menu supérieur du projet, cliquez sur Settings.

Faites défiler jusqu'à 构建和开发设置.

Cliquez install 命令上的 Override 按钮，并附加 --legacy-peer-deps。例如。安装命令：npm install --legacy-peer-deps.

Enregistrez les modifications et redéployez le projet.