404 on Refresh/Direct Access for SPA Subpaths (Vercel Deployment)

Help
1

Hi everyone,
I’m facing an issue with my SPA deployed on Vercel. The website loads correctly at the root (/), and client-side navigation works perfectly to other pages (e.g., /profile, /novels/1). However, when I refresh a subpath page or try to access it directly by typing the URL, I get a Vercel “404 Not Found” error.
My setup:
Frontend: Vite/React SPA (builds to dist/public)
Backend: Node.js serverless function (server/index.ts)
Deployment: Vercel
I have configured my vercel.json with the standard SPA fallback rule as the very last route:

{ “src”: “/(.*)”, “dest”: “/dist/public/index.html” }

My Vercel project settings for build command (npm run vercel-build) and output directory (dist/public) are correct. The latest Vercel build logs show a successful build with index.html and static assets in dist/public, and the serverless function building successfully.
Despite this configuration, Vercel is not serving index.html for subpaths on refresh, leading to the 404.
A recent failed request for /novels/1 showed the x-vercel-error: NOT_FOUND header, indicating the fallback rule wasn’t applied.
Expected Behavior: Refreshing /profile should serve index.html so the SPA router can handle the /profile route.
Current Behavior: Refreshing /profile results in a Vercel 404 page.
Does anyone have suggestions on why Vercel might not be applying the SPA fallback rule correctly in this scenario, even with the configuration in place and a successful build?
Any help or insight would be greatly appreciated!
Thanks,
ficnest

2

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

4

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