DEV Community

Cover image for I Spent 3 Hours Debugging a Vercel 404 on My Lovable App. Here's What Fixed It.
Malik Sohaib iqbal
Malik Sohaib iqbal

Posted on

I Spent 3 Hours Debugging a Vercel 404 on My Lovable App. Here's What Fixed It.

#tanstack #lovable #ai #webdev

*May 2026 | Tags: *

Let me paint you a picture.

You just finished building something cool on Lovable. You're excited. You connect it to Vercel, hit deploy, watch the build logs fly by — green checkmarks, everything looks great. You click your shiny new URL and...

404: NOT_FOUND
Code: NOT_FOUND
ID: bom1::l6cqn-1778704042023-1d630b2554e3
Enter fullscreen mode Exit fullscreen mode

Brutal.

So you google it. Every answer says the same thing: "add a vercel.json with a rewrite rule." You do that. You redeploy. You refresh. Same 404. You add it again. You triple-check the placement. Still broken. At this point you're questioning your life choices.

I've been there. This post is what I wish I had found at hour one instead of hour three.

First, Why Does This Even Happen?

Here's the thing nobody explains clearly: Lovable recently switched its entire stack to TanStack Start, and that changes everything about how deployment works.

The old rewrite trick worked because old Lovable apps were plain SPAs — just static files. Vercel would serve index.html for every route and React would handle the rest. Simple.

But crack open your vite.config.ts in any recent Lovable project and you'll see something like this:

// @lovable.dev/vite-tanstack-config already includes the following — do NOT add them manually:
//   - tanstackStart, viteReact, tailwindcss, tsConfigPaths, cloudflare (build-only) ...

import { defineConfig } from "@lovable.dev/vite-tanstack-config";

export default defineConfig();
Enter fullscreen mode Exit fullscreen mode

See that tanstackStart in the comment? That's the culprit — well, not a culprit exactly, more like the thing that changes all the rules.

TanStack Start is a full-stack SSR framework. It's not just a router slapped on top of React. It has server functions, data loaders, and actual server-side rendering. It's closer to Next.js than it is to a plain Vite app.

So when Vercel gets a request for /dashboard, it looks for a file called dashboard. There isn't one. It doesn't know your app handles routing on the server. It just throws a 404 and calls it a day.

That error ID starting with bom1:: is actually a clue — that means Vercel itself is rejecting the request before your app even gets a chance to breathe.

The Fix That Actually Works

The answer is Nitro — a universal deployment adapter that tells Vercel exactly how to run a TanStack Start app. Vercel even has official docs for this.

Here's what you do, step by step.

1. Install Nitro 

npm install nitro
Enter fullscreen mode Exit fullscreen mode

2. Update your vite.config.ts

This is the important part. You're not replacing anything — just adding the Nitro plugin inside the vite config option:

import { defineConfig } from "@lovable.dev/vite-tanstack-config";
import { nitro } from "nitro/vite";

export default defineConfig({
  vite: {
    plugins: [
      nitro({
        preset: "vercel",
      }),
    ],
  },
});
Enter fullscreen mode Exit fullscreen mode

That preset: "vercel" is what tells Nitro to output your build in exactly the format Vercel expects. No guessing, no rewrites, no hacks.

3. Delete your vercel.json

If you added one, get rid of it. Nitro handles all of that now, and having both will just confuse things.

4. Check your Vercel project settings

While you're at it, make sure these are set correctly:

  • Output Directory → dist
  • Node.js Version → 22

5. Don't forget your environment variables

This one bites a lot of people. Lovable keeps your secrets in its own environment — they don't magically appear in Vercel. Go to Settings → Environment Variables and manually add everything:

  • VITE_SUPABASE_URL
  • VITE_SUPABASE_ANON_KEY
  • Any other VITE_* variables your app needs

And set them for Production, Preview, and Development — not just production. Future you will thank you.

6. Redeploy without cache

Go to your latest deployment in Vercel and choose "Redeploy → Redeploy without existing Build Cache". Old cached builds have caused me more grief than I'd like to admit.

That's it. Push your changes and it should work.

Honestly? Cloudflare Pages Is Even Easier

If you look at that vite.config.ts comment again, you'll notice it also mentions cloudflare (build-only). That's not an accident — Lovable actually ships with a Cloudflare adapter built in.

Cloudflare Pages is what Lovable was originally designed to deploy to. No Nitro setup, no extra packages, no configuration files. You connect your GitHub repo, set the output to dist, add your env vars, and it just works.

It also gives you:

  • Free custom domains with automatic SSL
  • Unlimited bandwidth on the free tier
  • Instant global deployments

If you don't have a specific reason to be on Vercel, honestly just use Cloudflare Pages. You'll save yourself a lot of trouble.

One More Thing — The TanStack Security Scare

While I was writing this, news broke about a supply chain attack on TanStack packages. If you saw the headlines and got nervous, here's the short version of what happened.

On May 11, 2026, a hacker group called TeamPCP did something genuinely clever and scary. They didn't steal any passwords or API keys. Instead they found three separate weaknesses in TanStack's GitHub Actions pipeline and chained them together:

  1. They opened a pull request from a fork that ran their code in CI
  2. That code poisoned the build cache with malware
  3. When a legitimate TanStack maintainer later merged a totally unrelated PR, the release pipeline restored that poisoned cache — and the malware extracted a short-lived publish token from memory and used it to push malicious packages to npm

The result was 84 malicious versions of 42 TanStack packages published to npm — all with valid security certificates, looking completely legitimate. The attack was caught by an external security researcher within about 20 minutes, which is genuinely impressive response time.

You can read the full story from the TanStack team themselves: postmortem and hardening follow-up. They're unusually transparent about what went wrong and what they're fixing.

Should you be worried as a Lovable user? Probably not. Here's why:

The entire attack window was 6 minutes. Only developers who ran npm install during those specific 6 minutes on May 11 were at risk. Your deployed app doesn't run npm install — it's already built. And TanStack themselves confirmed that @tanstack/query, @tanstack/table, @tanstack/form, @tanstack/virtual, and @tanstack/store were never touched.

This isn't a reason to abandon TanStack. It's the kind of attack that can hit any open source project with a CI/CD pipeline — the same technique was used against Bitwarden CLI, Mistral AI, and UiPath in the same campaign. The TanStack team handled it well and are now significantly hardening their pipeline.

More reading if you want the technical deep-dive:

Quick Reference

If you just want the cheat sheet:

Problem Fix
404 on every route Add Nitro with preset: "vercel" to vite.config.ts
"No output directory named build" Set output directory to dist in Vercel settings
Blank white screen after deploy Add your VITE_* env vars to Vercel
Still broken after changes Redeploy without build cache
Want zero config deployment Switch to Cloudflare Pages
Worried about the May 11 attack You're fine — 6 minute window, now patched

If this saved you a few hours of headache, drop a ❤️ or leave a comment — especially if you hit a different variation of this problem. And if you're in the Lovable Discord or community, share this around. A lot of people are hitting this wall right now and don't know why.

Top comments (0)