Vite environment variables undefined on Vercel: the complete fix

import.meta.env values are undefined in production on Vercel or Netlify. Learn the VITE_ prefix rule, build-time baking and how to redeploy correctly.

If import.meta.env.SOMETHING is undefined in production, one of three rules was broken.

Rule 1: only VITE_ variables reach the browser

// ❌ undefined in production
import.meta.env.SUPABASE_ANON_KEY
process.env.SUPABASE_URL

// ✅
import.meta.env.VITE_SUPABASE_ANON_KEY

Rename the variable in code and in your host settings. Next.js works the same way with the NEXT_PUBLIC_ prefix.

Rule 2: values are baked in at build time

Adding a variable in Vercel does not update the running site. Trigger a new deployment after every change. Netlify Drop never runs a build at all, so variables are never injected: use Git-based deploys instead.

Rule 3: the .env file is not deployed

.env should be in .gitignore (good), so your host never sees it. Every variable must be entered in the host dashboard. Keep a .env.example with names only:

VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=

Never make secrets public

Anything prefixed VITE_ is visible to every visitor. Your Supabase publishable/anon key is fine (it is public by design and protected by RLS). Stripe secret keys, OpenAI keys and the Supabase service-role key are not: move those into a server-side function.

Quick checklist

Names match .env exactly (case-sensitive)
Set for the Production environment
Redeployed after the change
No secrets with a VITE_ prefix

Rather have it fixed for you?

We take your Lovable or Bolt app live on Vercel with your domain and working login, for $39 flat. Full refund if it fails.

Get it live – $39 Security scan – $19