404 Error - Deploying from Vercel CLI is fine, but CI/CD deployments give 404

Help
,
1

I’m getting the classic 404 Not Found error for my React app deployed with Vercel. However, when I deploy my project using the “vercel” command from the terminal, it deploys fine. It’s only when I push to git and that triggers a redeploy that the 404 Not Found error crops up again.

How can I debug this issue and fix it so that CI/CD works?

Has anyone come across this before?

Using Vercel CLI 37.13.0, successful build logs:

vite build --mode production

09:09:04.886

09:09:05.137vite v5.4.10 building for production…

09:09:05.196transforming…

09:09:16.948✓ 1952 modules transformed.

09:09:18.398rendering chunks…

09:09:18.471computing gzip size…

09:09:18.542dist/index.html 1.64 kB │ gzip: 1.00 kB

09:09:18.543dist/assets/index-1Bt57JCL.css 280.91 kB │ gzip: 41.66 kB

09:09:18.543dist/assets/index-BLtHmKlf.js 2,427.35 kB │ gzip: 620.43 kB

09:09:18.543

09:09:18.543(!) Some chunks are larger than 500 kB after minification. Consider:

09:09:18.543- Using dynamic import() to code-split the application

09:09:18.543- Use build.rollupOptions.output.manualChunks to improve chunking: Configuration Options | Rollup

09:09:18.543- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

09:09:18.545✓ built in 13.38s

09:09:18.664Build Completed in /vercel/output [15s]

09:09:18.700Deploying outputs…

09:09:20.290

09:09:20.554Deployment completed

09:09:26.756Uploading build cache [19.44 MB]…

09:09:27.355Build cache uploaded: 598.135ms

Build Logs giving a 404:

Cloning completed: 434.335ms

09:06:55.982Restored build cache from previous deployment (4z9EAitpNW4icj6cdBPmRoG8n9Nf)

09:06:56.067Running “vercel build”

09:06:56.478Vercel CLI 37.14.0

09:06:56.664Build Completed in /vercel/output [9ms]

09:06:56.688Deploying outputs…

09:06:57.688

09:06:57.917Deployment completed

09:06:58.922Uploading build cache [29.00 B]…

09:06:59.062Build cache uploaded: 139.883ms

Deployment URL or Custom Domain:
Environment (local, preview, production): Prod
Project Framework: React (vite)
Build Settings: 
  Framework Preset:
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version:
Package Manager: npm
Relevant Packages:

Thanks for any help awesome ppl!

2

As always with these things, I tried a bunch of stuff and I’m not sure exactly what fixed it, but my last deploy after pushing to git succeeded. Here’s what I tried:

  • I noticed an earlier deploy had no “index.html” in the /output folder of my deployment, whereas the successful deployment (from the command line) did have a index.html file in there.
  • I moved the index.html into the /public folder of my project.
  • build fails and the logs say that the package.json can’t be found. It no longer succeeds and gives a 404 error on the homepage.
  • I run an NPM install.
  • build fails
  • I change the settings for the root directory to “.” and also override the build command to “npm run build” to match build logs I got from a successful build from the command-line.
  • build fails
  • I get rid of the overrides (so I’m just using the default deployment settings now). And move index.html back to the root directory (this is where it has always lived in my project). I then, on a whim, decide to track the “package.json” in git (it was previously in gitignore).
  • build succeeds.

My conclusion is that an NPM install, and ensuring you are tracking the package.json in Git may help resolve the 404 error. Cheers.

2 Likes
3

I’m glad you got it working! Thanks for sharing what you did :smile:

1 Like
4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.