I uploaded my React project to GitHub and then attempted to obtain the site link from Vercel. However, I encountered an issue during the build phase, and this is the error message I received:
Running build in Cleveland, USA (East) – cle1
Cloning github.com/MansourMahmoud/React-Movies (Branch: master, Commit: d5274c3)
Previous build cache not available
Cloning completed: 523.223ms
Running "vercel build"
Vercel CLI 31.0.1
Installing dependencies...
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.8.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.8.0>
npm notice Run `npm install -g npm@9.8.0` to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: movies@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<= 15.x.x" from react-show-more@1.1.1
npm ERR! node_modules/react-show-more
npm ERR! react-show-more@"^1.0.6" 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!
npm ERR! For a full report see:
npm ERR! /vercel/.npm/_logs/2023-07-12T00_20_03_830Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR! /vercel/.npm/_logs/2023-07-12T00_20_03_830Z-debug-0.log
Error: Command "npm install" exited with 1
I believe the issue lies with the libraries I installed in React, as I used the --force command to bypass the errors that were appearing and install the library. Now, I want to deploy the site. How can I resolve or bypass this conflict to proceed with the deployment?
Here is the text of my React project's package.json file:
{
"name": "movies",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.3",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.4",
"@mui/styled-engine-sc": "^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.4.0",
"bootstrap": "^5.3.0",
"date-fns": "^2.30.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-icons": "^4.9.0",
"react-redux": "^8.0.7",
"react-router-dom": "^6.12.1",
"react-scripts": "5.0.1",
"react-scroll-horizontal": "^1.6.6",
"react-show-more": "^2.0.0",
"react-slick": "^0.29.0",
"react-star-ratings": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.11",
"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"
]
}
}
In Vercel, go to Project Settings for your project, then Build & Development Settings/Project Settings/Install Command. Now click on the 'Override' slider/checkbox. That will let you enter 'npm install --force' as the install command in the textbox. Click 'Save'.
That fixes the problem, but you need to force Vercel to run the command. Go to Deployments, and for the failed deployment (the top one) click on '...' to the right, and Redeploy. Make sure the 'Use existing Build Cache' checkbox is clear, and click the Redeploy button. It should now install your dependencies successfully.