Vercel 404 NOT_FOUND: The Fix Before You Ever See It
Your build succeeded. Your app still shows NOT_FOUND. Here is the actual cause, and the one change that prevents it from ever happening.
Your MissionForge guide lives inside your browser
An overlay appears directly on top of Supabase and Lovable. No tab switching, no re-reading docs.
Copy your Project URL
Find the Project URL field below and click the copy icon. We will use this in Lovable’s environment settings.
Stylized preview. The real guide is interactive, not a screenshot.
Confirm this is the error you are hitting
If Vercel's build log shows a successful build, but opening your live app returns a 404 page reading NOT_FOUND, this is almost always the same root cause: a TanStack Start app needs one extra setting to run correctly on Vercel's serverless functions.
Open vite.config.ts in your project
This file controls how your app is built. It already exists in your Lovable project, you are just adding a couple of lines to it, not creating anything new.
Enable Nitro only when deploying to Vercel
Update the config so Nitro turns on specifically when the VERCEL environment variable is present, and point the TanStack Start server entry at server. The actual change: export default defineConfig({ nitro: process.env.VERCEL ? true : false, tanstackStart: { server: { entry: "server" } } });
Saving the file alone will not fix a live deployment
Vercel only rebuilds when it receives a new commit or you trigger a manual redeploy. If you already hit the 404, push this change and redeploy, do not just refresh the broken page.
Best done before your first deploy, not after
MissionForge's own build flow adds this exact config change as a step before deploying for the first time, specifically so students never see the 404 at all.
Why TanStack Start needs Nitro on Vercel
Locally, your app can run its own small server however it likes. On Vercel, TanStack Start apps run as serverless functions instead, and Nitro is what packages your server code into a format Vercel's functions can actually execute. Without it enabled, Vercel serves your static files correctly but has nowhere to send requests that need the server, which is what shows up as a 404.
What the NOT_FOUND error is actually telling you
It is easy to read a 404 as something broken in your app's code. Here it usually means the opposite: your static build succeeded, but the routing layer on Vercel has no matching server function to hand the request to. Once Nitro is enabled for Vercel specifically, that routing gap closes and the error stops appearing on every subsequent deploy.
Want to build this for real instead of just reading about it?
Frequently asked questions
Why does my Vercel deployment show a 404 even though the build succeeded?
A successful build means your files compiled correctly, it does not mean Vercel knows how to route requests to your app's server logic. TanStack Start apps need Nitro enabled specifically for Vercel, otherwise Vercel has no server function to send the request to, which shows up as NOT_FOUND.
What is Nitro and why does enabling it fix this?
Nitro packages your app's server code into a format that hosting platforms like Vercel can run as serverless functions. Without it, Vercel only serves your static assets, so any route that needs the server layer returns a 404.
Do I need this fix if I am not using TanStack Start?
This specific fix applies to TanStack Start apps deployed on Vercel. Other frameworks handle server rendering differently, so the same NOT_FOUND symptom on a different stack usually has a different cause.
Can I apply this fix after I have already deployed and hit the error?
Yes. Update your vite.config.ts the same way, then push the change or trigger a manual redeploy. The fix only takes effect on the next deploy, refreshing the broken page will not do anything.
Will enabling Nitro only on Vercel break anything locally?
No. The config checks for the VERCEL environment variable, which is only present on Vercel's infrastructure, so local development keeps running exactly as it did before.
How do I confirm the fix actually worked?
Open your live app link after the new deploy finishes. If it loads instead of showing NOT_FOUND, the fix took. You can also check that the latest deploy's build log reflects the commit containing your vite.config.ts change.
Set the Nitro flag conditionally, not permanently
Only enable it when process.env.VERCEL is present, so local development and other hosting providers are not affected.
Redeploy after any vite.config.ts change
Vercel needs a fresh build to pick up config changes. Saving the file by itself does not trigger a new deploy.
Check the build logs before assuming the fix did not work
Confirm the latest deploy actually includes your vite.config.ts change before troubleshooting further.
Apply this before your first deploy, not after
The mission handles this proactively. Adding it after a live 404 just costs one extra redeploy instead of preventing the error entirely.
Why people drop off before they finish
You're not the problem. The format is. Here's what changes when you switch to an interactive mission.
- ✕Pause, rewind, pause again, repeatedly
- ✕The UI has changed since recording
- ✕No feedback when you complete a step
- ✕Lose context every time you switch tabs
- ✓Live overlay, no tab switching ever
- ✓Always current: guides track the real UI
- ✓Instant confirmation at every step
- ✓Full context stays open in your browser
Looking for the next thing to build? Browse every mission and find one that matches what you are trying to ship.
Browse all missions