Open the build log and find the first error, not the last line. Most failed deploys come down to one of four things: the host builds with a different Node version from your laptop, the dependency lockfile doesn't match package.json, a setting the build needs isn't set on the host, or the host treats a warning as an error. Build it on your own machine the way the host does, and it will usually fail the same way.
What's the problem
You push the code and the deploy fails: "Build failed", "Command exited with 1", "npm install exited with 1". The site stays on the old version, or never appears at all. Locally, the same code builds fine.
Why it happens
- A different Node version. The host builds with whatever Node version it has by default, unless the project says otherwise. Code and packages written for one version can fail on another.
- The lockfile doesn't match. When a build installs dependencies with
npm ci, it installs exactly whatpackage-lock.jsonlists, and stops with an error if that file disagrees withpackage.json.npm installon your laptop updates the lockfile instead, so you never see the problem. - A setting is missing at build time. Frontend tools bake settings such as API addresses into the app while it's being built. If the setting isn't in the host's environment variables, the build fails, or worse, succeeds with a blank.
- The build server is stricter. Build servers commonly set an environment variable called
CI. When it's set, some tools, Create React App among them, fail the build on warnings they'd only print on your laptop. - Capital letters in file names. Most hosts build on Linux, where
Header.jsandheader.jsare different files.
How to fix it
- Open the build log. On Vercel it's on the deployment's page; on Netlify, under the failed deploy. Scroll up to the first line that says error. Everything after it is usually a consequence.
- Build it locally the host's way. Delete
node_modules, runnpm ci, then the exact build command the host uses. - Pin the Node version. Set it in the host's settings, or in the project (an
.nvmrcfile or theenginesfield inpackage.json), so laptop and host match. - If
npm cicomplains about the lockfile, runnpm installlocally, check the app still works, and commit the updatedpackage-lock.json. - Add missing build settings in the host's environment variables, then redeploy. Values are baked in at build time, so changing them needs a new build.
- Fix the warnings the build is failing on, rather than switching the check off.
- Match file-name capitals in every import.
When to call Preventionlabs
If the log names a missing setting or a version, fix it and redeploy. Call us when the build fails because the project has drifted: dependencies years out of date, packages that no longer install, a build tool that's been retired, and every fix uncovering the next failure. The first thing a resurrection delivers is an app that builds and starts on maintained dependencies, deployed in your own hosting account.
Submit your project for a free assessmentFree assessment. $10,000 AUD flat to get it live, only if we take it on and you go ahead.
Sources
- Vercel: Troubleshooting Build Errorshosting platform docs
If your build fails, Vercel will report the error message on the Deployments page so that you can investigate and fix the underlying issue.
- Netlify: Manage build dependencieshosting platform docs
A build’s Node.js version is initially determined by the default version preinstalled on the site’s selected build image.
- npm: npm ciofficial docs
If dependencies in the package lock do not match those in package.json, npm ci will exit with an error, instead of updating the package lock.
- Create React App: Running Tests: Continuous Integrationofficial docs
Popular CI servers already set the environment variable CI by default but you can do this yourself too:
- Vite: Env Variables and Modesbuild tool docs
The values of these variables are bundled into your source code at build time.