- client
- src
- index.js
- App.js
- components... etc
- package.json
- server
- index.js #contains express and mongodb config
- server.js #starting point of routes
- package.json
- vercel.json
cd client && npm run buildcd server && node index.js (the static files will be served via the backed from client/build folder)I wanted to first build the client using vercel and then serve the serevr using vercel. The issue is occuring during the build. In vercel.json I have set up the following:
{
"version": 2,
"builds": [
{
"src": "client/package.json",
"use": "@vercel/static-build"
},
{
"src": "server/package.json",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/.*",
"dest": "server/src/server.js"
}
]
}
According to this (as I understood from vercel logs) first the client needs to be built according to the build command in client/package.json:
{
"name": "ebazar-client",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "npm install --legacy-peer-deps && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080",
"homepage": "/",
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@headlessui/react": "^1.7.18",
"@heroicons/react": "^1.0.6",
"@material-ui/core": "^4.12.4",
.
.
etc
and then the server needs to be built and served according to the script in server/package.json:
{
"name": "ebazar-server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"dev": "nodemon --trace-warnings src/index",
"build": "npm i && cd ../client && npm run build",
"start": "node src/index",
"test": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles",
"test:coverage": "cross-env NODE_ENV=test jest --coverage --runInBand --detectOpenHandles"
},
.
.
etc
I know my server scripts may have errors, but currently I'm trying to debug the issues related to the scripts in client/package.json. When I run vercel via cli the below error occurs:
$ vercel
Vercel CLI 40.1.0
🔍 Inspect: https://vercel.com/anusree-projects/ebazar/wizFBu3fgV [5s]
✅ Preview: https://ebazar-nhjg8-anusree-projects.vercel.app [5s]
Error: Command "npm install" exited with 1
Error: Check your logs at https://ebazar-nhjg8-anusree-projects.vercel.app/_logs or run `vercel logs ebazar-nhjg8-anusree-projects.vercel.app`
And when I visit the project link in vercel, the deployment logs are as follows:
Running build in Washington, D.C., USA (East) – iad1
Retrieving list of deployment files...
Downloading 233 deployment files...
Restored build cache from previous deployment (CKXZEUz8KH7LtJCtLbMMh34ghuRN)
Running "vercel build"
Vercel CLI 40.1.0
WARN! Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
Installing dependencies...
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @material-ui/[email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error react@"^18.2.0" from the root project
npm error peer react@">=16.8.0" from @emotion/[email protected]
npm error node_modules/@emotion/react
npm error @emotion/react@"^11.13.3" from the root project
npm error peer @emotion/react@"^11.0.0-rc.0" from @emotion/[email protected]
npm error node_modules/@emotion/styled
npm error @emotion/styled@"^11.13.0" from the root project
npm error 3 more (@mui/material, @mui/styled-engine, @mui/system)
npm error 3 more (@mui/material, @mui/styled-engine, @mui/system)
npm error 27 more (@emotion/styled, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm error node_modules/@material-ui/core
npm error @material-ui/core@"^4.12.4" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm error node_modules/@material-ui/core
npm error @material-ui/core@"^4.12.4" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /vercel/.npm/_logs/2025-02-03T12_54_05_901Z-eresolve-report.txt
npm error A complete log of this run can be found in: /vercel/.npm/_logs/2025-02-03T12_54_05_901Z-debug-0.log
Error: Command "npm install" exited with 1
I got to know that the error is because of dependencies with versions that dont match. But I wanted to install tehm using the flag --legacy-peer-deps but I just dont know where to mention it.
I cannot put anything in Build and Development Settings of vercel accriding to the warning I've recieved above: WARN! Due to 'builds' existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
I tried putting in vercel.json in below ways in order to avoid the npm install that was happening during vercel build(I dont know how), and it was of no use
{
"version": 2,
"builds": [
{
"src": "client/package.json",
"use": "@vercel/static-build"
},
{
"src": "server/package.json",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/.*",
"dest": "server/src/server.js"
}
],
"installCommand":" "
}
{
"version": 2,
"builds": [
{
"src": "client/package.json",
"use": "@vercel/static-build"
},
{
"src": "server/package.json",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/.*",
"dest": "server/src/server.js"
}
],
"buildCommand":"npm run build"
}
{
"version": 2,
"builds": [
{
"src": "client/package.json",
"use": "@vercel/static-build",
"config":{
"installlCommand":" ",
"buildCommand":"npm run build"
}
},
{
"src": "server/package.json",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/.*",
"dest": "server/src/server.js"
}
]
}
I just want to know which exact script is being executed as mentioned in vercel logs, and can i add a flag --legacy-peer-deps to wherever this installation script is.
This deployment problem is a sign of a fundamental problem with dependencies that can be resolved locally. This can result in actual incompatibility of dependency versions, or at least cause inconvenience to other developers who are forced to use --force or --legacy-peer-deps options, as the error suggests.
The whole log can be analyzed in eresolve-report.txt file linked in the error, but here @material-ui/core seems to be the only dependency to blame. The primary problem is that @material-ui/core is outdated, the version in use wasn't developed at the time when React 18 was released:
Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5
The preferable way is to solve it from this side. In case there is no real necessity or feasibility of this, dependency versions need to be locked to the expected ones. This can be done with package.json overrides section:
"overrides": {
"@material-ui/core": {
"react": "$react",
"react-dom": "$react-dom"
}
}
The overrides need to be added until locally running npm i successfully finishes without --force or --legacy-peer-deps options. This results in updated package-lock.json file that needs to be committed.