Build Fails on Vercel with Exit Code 1 When Running npm run build

Other Questions NPM
1

I am currently working on a React project set up with create-react-app, and everything operates smoothly on my local machine using npm start. However, I’m encountering issues when I attempt to deploy it to Vercel, as the build process fails.

I have already tried deleting the node_modules directory and executing npm install again, but the issue remains unresolved.

Here’s the error I’m seeing:

Build failed! Command "npm run build" exited with 1
Refer to deployment logs for further details

Below are the detailed logs from the deployment:

14:22:15.441    Fetching deployment files...
14:22:17.185    Successfully downloaded 28 files
14:22:19.352    Analysis of the source code completed
14:22:21.499    Setting up the build environment...
14:22:26.121    Build environment ready in 4622ms
14:22:30.361    Checking for cached builds...
14:22:31.447    No build cache found
14:22:32.825    Identified package.json
14:22:32.826    Installing npm packages...
14:23:08.702    > [email protected] postinstall /vercel/workspace/node_modules/babel-runtime/node_modules/core-js
14:23:08.702    > node -e "try{require('./postinstall')}catch(e){}"
14:23:08.814    > [email protected] postinstall /vercel/workspace/node_modules/core-js
14:23:08.814    > node -e "try{require('./postinstall')}catch(e){}"
14:23:08.893    > [email protected] postinstall /vercel/workspace/node_modules/core-js-pure
14:23:08.893    > node -e "try{require('./postinstall')}catch(e){}"
14:23:09.011    > [email protected] postinstall /vercel/workspace/node_modules/ejs
14:23:09.012    > node ./postinstall.js
14:23:11.392    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
14:23:11.392    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:23:11.401    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
14:23:11.401    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:23:11.412    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
14:23:11.412    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:23:11.420    Added 1985 packages from 812 contributors in 38.59s
14:23:12.766    137 packages are seeking funding
14:23:12.766      run `npm fund` for details
14:23:13.041    Executing "npm run build"
14:23:13.310    > [email protected] build /vercel/workspace
14:23:13.310    > react-scripts build
14:23:15.056    Creating an optimized production build...
14:23:33.758    Treating warnings as errors due to process.env.CI = true.
14:23:33.758    Most CI environments enable this automatically.
14:23:33.758    Compilation failed.
14:23:33.759    src/components/Timer.js
14:23:33.759      Line 21:6:  React Hook useEffect is missing a dependency: 'props.onTimeout'. Include it or remove the dependency list  react-hooks/exhaustive-deps
14:23:33.787    npm ERR! code ELIFECYCLE
14:23:33.788    npm ERR! errno 1
14:23:33.791    npm ERR! [email protected] build: `react-scripts build`
14:23:33.791    npm ERR! Exit status 1
14:23:33.793    npm ERR! 
14:23:33.793    npm ERR! Build script for [email protected] failed.
14:23:33.793    npm ERR! This is unlikely to be an npm issue. More logs may be available above.
14:23:33.802    npm ERR! Complete log available at:
14:23:33.802    npm ERR!     /vercel/.npm/_logs/2021-03-28T11_23_33_792Z-debug.log
14:23:33.816    Error: Command "npm run build" exited with 1
2

Hit this same issue a few months ago and it drove me nuts for hours. Vercel automatically sets CI=true, which makes react-scripts treat ESLint warnings as build-breaking errors.

You’ve got a missing dependency warning in your useEffect. Adding the dependency might cause infinite loops though, depending on your component structure. I’d either use eslint-disable-next-line above that useEffect if you’re sure the dependency isn’t needed, or restructure the code to avoid it entirely.

Also check if your local ESLint config matches what Vercel’s running. Different versions can make builds pass locally but fail in production. Make sure your package-lock.json is committed so Vercel uses identical dependency versions.

3

Everyone’s giving you manual fixes, but you’ll hit this same issue every deployment. This isn’t just about one dependency warning.

Stop babysitting ESLint rules and deployment configs across platforms. I built a workflow that handles this automatically - pre-deployment validation catches React hook issues before they reach Vercel.

Set up automated checks that scan your code, fix common dependency array problems, run builds in multiple environments, and only deploy when everything passes. No more surprise build failures.

Mine automatically adds missing dependencies when safe, or flags them for manual review when they might cause re-render loops. Beats dealing with Vercel’s CI mode quirks.

The automation also handles environment variable differences, package version mismatches, and other deployment gotchas. Way better than fixing these one by one.

4

Your build’s failing because React treats warnings as errors in CI environments like Vercel. The problem’s in Timer.js - useEffect is missing ‘props.onTimeout’ from its dependency array.

Quick fix: add the missing dependency or wrap the function with useCallback. But honestly, manually fixing these deployment issues gets old.

I switched to automating my whole deployment pipeline with Latenode instead of wrestling with platform quirks. You can set up automated builds that handle linting fixes, dependency checks, and deploy to multiple platforms at once. Catches these problems before production and saves hours of debugging.

The automation runs builds in consistent environments and auto-fixes common React hook dependencies or flags them for review. Way more reliable than hoping each platform handles your code the same.

5

ah this is annoying but easy fix - vercel runs builds in strict mode so eslint warnings break everything. just add props.onTimeout to your useEffect dependency array in Timer.js line 21. or if you don’t want that dependency messing things up, add // eslint-disable-next-line react-hooks/exhaustive-deps above the useEffect. happens to everyone deploying react apps lol

6

The error you’re encountering stems from Vercel treating ESLint warnings as build failures. Specifically, in your Timer.js file, the useEffect hook is missing ‘props.onTimeout’ in its dependency array. This is what’s causing the build to exit with an error.

To resolve this, you can simply add ‘props.onTimeout’ to your dependency array, or alternatively, you might consider wrapping the function in useCallback if its identity shouldn’t change across renders. While you could set CI=false in your Vercel settings to bypass this, it’s not recommended as it would conceal other important warnings. Address the dependency issue directly for a more robust solution.