UnbreakMyApp / Fix guides

Environment variables undefined after deploying to Vercel or Netlify

Works in Lovable or on your computer, but the live site says "supabaseUrl is required" or your API key is undefined. How to set env vars correctly for Vite and Next.js.

Building a new app instead? Try Bolt (20% off with our link) (affiliate link).

Why it happens

Your .env file is not uploaded when you deploy (and should not be), so the host has no values until you add them in its dashboard.

Front-end frameworks only expose variables with a specific prefix: VITE_ for Vite (used by Lovable and Bolt) and NEXT_PUBLIC_ for Next.js browser code. A variable named SUPABASE_URL will be undefined in the browser even if it is set.

Vite and Next.js bake these values in at build time. If you add or change a variable after the last build, the live site keeps the old (empty) value until you redeploy.

How to fix it, step by step

  1. Open your code and find the exact names it reads, e.g. import.meta.env.VITE_SUPABASE_URL or process.env.NEXT_PUBLIC_SUPABASE_URL.
  2. In Vercel → Project → Settings → Environment Variables (or Netlify → Site configuration → Environment variables), add each name with the exact same spelling and its value.
  3. Select the right environments (Production, and Preview if you use preview links).
  4. Only put public values in VITE_ / NEXT_PUBLIC_ variables (Supabase URL and anon/publishable key are fine). Never put secret keys there; they become visible to anyone.
  5. Trigger a new deployment (Vercel: Deployments → Redeploy). Changing a variable does not update a site that is already built.
  6. Open the live site, check the browser console, and confirm the error is gone.

Paste-ready prompt for Lovable

My app works in preview but on Vercel/Netlify the environment variables are undefined. Please:
1. List every environment variable the app reads and the exact name it expects.
2. Make sure browser code only uses VITE_ (Vite) or NEXT_PUBLIC_ (Next.js) prefixed variables.
3. Move any secret keys (service role, Stripe secret, OpenAI) out of browser code into a server function.
4. Add a clear error message at startup if a required variable is missing.
5. Give me a checklist of the variable names and values I need to add in the hosting dashboard.

FAQ

I added the variable but it is still undefined. Why?

You need to redeploy. Vite and Next.js insert the values at build time.

Is it safe to expose my Supabase anon key?

Yes, it is designed to be public, as long as Row Level Security is on for every table. The service_role key must never be exposed.

Still broken?

Get a free diagnosis by email within 24 hours. Fixed or refunded.

Get a free diagnosis

Or get the weekly fix digest:

📬 This Week in Broken Apps: the most common Lovable/Supabase breaks and how to fix them. Free, weekly, unsubscribe anytime.

Free: the Vibe-Code Fix Checklist.

Sources