Forem: Malik Sohaib iqbal

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

Malik Sohaib iqbal — Wed, 13 May 2026 21:08:51 +0000

*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

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();

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

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",
      }),
    ],
  },
});

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:

They opened a pull request from a fork that ran their code in CI
That code poisoned the build cache with malware
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.

Stop Hiding It: Why "Vibe Coding" is the Ultimate Flex in 2026 🚀

Malik Sohaib iqbal — Tue, 07 Apr 2026 21:00:24 +0000

Let’s be real for a second. There’s a weird hush-hush energy in the dev community right now. People are shipping incredible web apps in record time, but when you ask how they did it, they get quiet. They don't want to admit they’re Vibe Coding.

If you're building with AI—leveraging models like Gemini, Claude, or Lovable to manifest your ideas—stop apologizing for it. ### 🎭 The Stigma vs. The Reality
Some people think that if you aren't manually typing every semicolon, you aren't "really" coding. I think that’s a legacy mindset.

Vibe coding isn't just "letting the AI do it." In my experience, it’s actually a high-level skill. To vibe code effectively, you need:

A Clear Vision: You have to know exactly what you want to build.

Strategic Intent: You have to understand why you are building it.

Architectural Oversight: You still need to understand the proper architecture to guide the AI toward a scalable, functional product.

🧠 The Shift: From Syntax to Strategy

In the coming years, the barrier to entry for "syntax" will hit zero. The real value will lie in creativity.

We are moving into an era where being a developer means being an architect of ideas. If you can define the "what" and the "why," the "how" becomes a collaborative dance between you and the machine. That’s not a shortcut; that’s an evolution.

📉 Is AI Vanishing? (Spoiler: No)

I hear the whispers: "The AI bubble will burst." Look at the global landscape. The world's superpowers and biggest tech giants are pouring trillions into this. The power of AI isn't going to decrease; it’s going to compound.

AI isn't going to vanish—it's going to become the floor we stand on.

💡 My Takeaway

Vibe coding is a great achievement. It shows you’ve mastered the art of leveraging modern tools to bring ideas to life. Be ready, be more creative, and focus on the goals behind your code.

What do you think? Is "Vibe Coding" the future of software engineering, or are we losing something vital by moving away from manual implementation?

🌪️ Proof of Work: The To-Do List of Infinite Regret

Malik Sohaib iqbal — Wed, 01 Apr 2026 20:49:57 +0000

What I Built

**
I built a productivity app for people who hate being productive. Proof of Work is a digital psychological experiment that turns simple task management into a high-stakes gamble.

The gimmick? You cannot "check off" a task. To complete anything (e.g., "Buy Milk"), you must first win a game of Minesweeper on an Expert-level grid (30x16 with 99 mines). If you hit a mine, the Hydra Engine triggers: your task isn't cleared—it duplicates 20 times. Now you have to buy milk 21 times. It is a functional implementation of a "short-circuit" for the human brain.

Demo

useless-to-do-list.vercel.app

Code

MalikSohaibIqbal / Useless-To-Do-list

The ultimate anti-productivity suite. Compliant with HTCPCP/1.0 (RFC 2324). Requires Expert-level Minesweeper proof-of-work to complete any task. Built with React, Lovable, and the existential dread of Google Gemini.

🌪️ Proof of Work: The To-Do List of Infinite Regret

A Productivity App for People Who Hate Being Productive.

📌 Overview

Proof of Work is a digital psychological experiment disguised as a task manager. Built for the HTCPCP Challenge, this app solves the "problem" of having too much to do by making it statistically impossible to finish anything.

By merging the high-stakes logic of Minesweeper with the "I'm a Teapot" philosophy of Larry Masinter, we have created a "short-circuit" for human productivity. It is a Ferrari engine inside a unicycle—technically impressive, yet fundamentally useless.

🛠️ The "Pain" Features

1. The Minesweeper Gatekeeper

You cannot simply "check off" a task. Clicking the completion box triggers a full-screen Minesweeper Expert Grid ($30 \times 16$ with $99$ mines).

Victory: The task is cleared.
Failure: You hit a mine, and the Hydra Engine activates.

2. The Hydra Engine (The Punishment)

If…

View on GitHub

How I Built It
This project was a "Dual-AI" collaboration:

Lovable: Acted as the Lead Architect, managing the complex React state required for the "Hydra" task duplication and the retro-brutalist UI.

Google Gemini: Served as the "Existential Consultant," curateing a library of 2,000+ unique demotivational quotes based on astrophysics and biology to remind users of their cosmic insignificance.

Tech Stack: React, Vite, Tailwind CSS, and localStorage to ensure your failures persist even after a browser refresh.

Prize Category
🤖 Best Google AI Usage
I leveraged Google Gemini to build the "Universal Entropy Engine." Every task is paired with an AI-generated reason why it doesn't matter (e.g., "The heat death of the universe renders 'Wash Dishes' mathematically irrelevant"). Gemini ensured the content was scientifically accurate, strictly neutral, and emotionally taxing.

🫖 Best Ode to Larry Masinter
This app is fully HTCPCP/1.0 (RFC 2324) compliant. If a user tries to close the Minesweeper modal or "cheat" the productivity trial, the app returns a hard 418 I'm a Teapot error. As a teapot, the software refuses to brew your productivity. We even injected the X-Brewing-Protocol header into the metadata as a tribute to Larry's legacy of intentional uselessness.

Built with ❤️ and a total lack of productivity.

Forem: Malik Sohaib iqbal

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

First, Why Does This Even Happen?

The Fix That Actually Works

1. Install Nitro

2. Update your vite.config.ts

3. Delete your vercel.json

4. Check your Vercel project settings

5. Don't forget your environment variables

6. Redeploy without cache

Honestly? Cloudflare Pages Is Even Easier

One More Thing — The TanStack Security Scare

Quick Reference

Stop Hiding It: Why "Vibe Coding" is the Ultimate Flex in 2026 🚀

🧠 The Shift: From Syntax to Strategy

📉 Is AI Vanishing? (Spoiler: No)

💡 My Takeaway

🌪️ Proof of Work: The To-Do List of Infinite Regret

What I Built

MalikSohaibIqbal / Useless-To-Do-list

The ultimate anti-productivity suite. Compliant with HTCPCP/1.0 (RFC 2324). Requires Expert-level Minesweeper proof-of-work to complete any task. Built with React, Lovable, and the existential dread of Google Gemini.

🌪️ Proof of Work: The To-Do List of Infinite Regret

A Productivity App for People Who Hate Being Productive.

📌 Overview

🛠️ The "Pain" Features

1. The Minesweeper Gatekeeper

2. The Hydra Engine (The Punishment)

2. Update your `vite.config.ts`