Error building react build folder using vercel.json. Attempting to build react build folder as well as run serverless nodejs server using vercel.json

Question

Project background:

I have a fullstack project with 2 subfolders: client(reactJS) and server(nodeJS).
Using vercel to deploy the entire fullstack project
Folder organisation:

- 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

How files are planned to be served:
- First run cd client && npm run build
- then run cd server && node index.js (the static files will be served via the backed from client/build folder)

Problem:

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.

"I got to know that the error is because of dependencies with versions that dont match" - is it? Can you reproduce the problem with local installation? The error from the logs doesn't make sense, are you sure it's not truncated? It doesn't require --legacy-peer-deps — Estus Flask
– Estus Flask, Commented Feb 3 at 11:48
@EstusFlask I'm sorry, yes, I have not pasted the entire logs of the error that had been logged. I have edited it now in the post itself. And as for a way to reproduce I'm not sure how can I explain without anyone logging into my vercel account, nor me sharing the .env file. But here in this sandbox link codesandbox.io/p/sandbox/lf3x7y I have put the entire code (as it was at the time it was creating the above said error) for reference, except for package.json which was autogengerated by sandbox and I'm somehow unable to delete it now. — Anu
– Anu, Commented Feb 3 at 13:24

Estus Flask · Accepted Answer · 2025-02-03 14:02:57Z

1

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.

answered Feb 3 at 14:02

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anu Feb 4 at 6:31

Thank you so much, this worked! I surely seem to have to brush more on npm before I can progress in react and vercel I guess. This seemed so simple yet I didn't know what I was missing. Thanks again.

Estus Flask Feb 4 at 8:29

Glad it helped.

Collectives™ on Stack Overflow

Error building react build folder using vercel.json. Attempting to build react build folder as well as run serverless nodejs server using vercel.json

Project background:

Problem:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Project background:

Problem:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related