Lovable app builds on Vercel but every page is a 404 (TanStack Start)

Why does this happen?

Lovable projects created from May 13, 2026 are TanStack Start apps, which need a host that runs their server code, so Vercel must receive a server build rather than a folder of static files. Lovable's build config (@lovable.dev/vite-tanstack-config) uses Nitro to produce that build for each platform, and Vercel's zero-configuration detection needs version 2.6.2 or newer. An older build config, a missing nitro package, a preset forced to another platform, or a Vercel project set up like a plain static Vite site leaves Vercel with no routes to serve.

How do you fix it?

1. Confirm the project is TanStack Start

   Open package.json in the GitHub repo. If it lists @tanstack/react-start, keep reading. If it doesn't, this is an older Lovable single-page app and the fix is a fallback rule instead (see the SPA 404 fix linked below).

2. Update Lovable's build config and make sure Nitro is installed

   Vercel's Lovable docs say zero-configuration detection needs @lovable.dev/vite-tanstack-config at ^2.6.2 or higher. Lovable's docs say to check that package.json lists nitro: without it, the build does not package the app, and older build configurations can skip Nitro outside Lovable or write a different output folder. Commit package.json together with the updated lockfile.

   npm install "@lovable.dev/vite-tanstack-config@^2.6.2" nitro
   git add package.json package-lock.json
   git commit -m "Update Lovable build config for Vercel"
   git push

3. Let Vercel treat it as TanStack Start, with no output directory

   In the Vercel project settings, set the framework preset to TanStack Start and clear any Output Directory or build command override (Lovable: Vercel needs no output directory; Netlify and Cloudflare Pages use dist, Vercel does not). If the dashboard keeps detecting plain Vite, Vercel's guide sets the preset in vercel.json.

   {
     "framework": "tanstack-start"
   }

4. Remove static-site leftovers and forced presets

   Delete any vercel.json rewrite that sends every path to /index.html, a fallback copied from older single-page-app guides. Lovable's docs tell you not to carry the SPA fallback from older React + Vite examples into a TanStack Start deployment because the server handles routing. Also remove a NITRO_PRESET environment variable or a nitro: { preset: ... } setting that targets another platform such as node-server. Nitro detects Vercel on its own.

5. Match the Node.js version

   Lovable's build settings use Node.js 22. If the build passes on your computer but fails on Vercel, Vercel's TanStack guide says to check that the Node.js version in project settings matches the one you use locally.

6. Add browser and server environment variables, then redeploy

   Lovable projects using Supabase need VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY (sent to the browser and embedded at build time) and SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY (read by server code). Add any other secrets your server functions use without the VITE_ prefix so they stay server-only. Redeploy after changing them.

7. Test the parts a static host can't do

   Open a nested route directly and refresh it, open a page that renders on the server, and trigger an action that calls a server function. Vercel's guide says routing 404s on a loading home page usually come from a missing Nitro step, so recheck step 2, read the deployment logs, and redeploy.

Common questions

Do I need to add the `nitro()` plugin to `vite.config.ts` myself?

Not in a Lovable project. Vercel's Lovable docs say no manual build configuration is required, because @lovable.dev/vite-tanstack-config sets up Nitro. Vercel's TanStack guide adds nitro() by hand for plain TanStack Start projects; in a Lovable project, update the build config package instead.

Why does the same repo work on Lovable or Cloudflare but not on Vercel?

Nitro builds a different output for each platform. Inside Lovable the target is set for you; outside, the build has to detect the host. Lovable says Nitro detects Vercel, Netlify and Cloudflare Pages automatically once the build config is current, so an old config or a preset pinned to another platform is the usual reason only one host works.

Can I just upload the built files to any static host?

No. Lovable says a TanStack Start app needs a host that runs server code, and a host that receives only static files does not run server rendering or server functions. For a plain Node server, Lovable documents NITRO_PRESET=node-server npm run build and node .output/server/index.mjs.

Which output directory should I set?

None on Vercel. Lovable's settings table lists dist for Netlify and Cloudflare Pages only.

Common with:

• Lovable

Related fixes

• Page works, but refreshing it gives a 404
• Blank page or “supabaseUrl is required” after moving off the builder
• Deploy succeeds but shows a blank page or “Page not found”
• Google login sends you back to localhost (or “redirect_uri_mismatch”)