Works in preview, blank page in production (missing environment variables)

Why it happens

Addresses and keys (your Supabase URL, your Stripe publishable key) live in environment variables. The preview has them. Your host builds the app again, with its own set, and any variable you did not add there is empty in the live app.

Two details catch people out. A variable is baked in when the app is built, so adding it afterwards changes nothing until you deploy again. And only variables with the right prefix (VITE_, NEXT_PUBLIC_) reach the browser at all.

Check it in a minute

1. Open the live app, then your browser’s console (right-click, Inspect, Console).
2. Look for a message such as “supabaseUrl is required” or “Invalid API Key provided”.
3. In your host’s settings, compare the environment variables for Production with your builder’s.

How to fix it

Give this to the AI that builds your app: Lovable, Bolt, Cursor, Claude Code or any other.

My app works in the preview but not on the live site. I think environment variables are missing from the production build.

1. List every environment variable the browser code reads (import.meta.env.* or process.env.NEXT_PUBLIC_*), and what each is for.
2. Tell me which of them must be set in my host's Production environment, with the exact names. Do not print any secret values.
3. Flag any variable the browser reads that lacks the prefix it needs to reach the browser, and any secret (a service-role key, a Stripe secret key) that the browser code should not be reading at all.
4. Add a clear check at startup: if a required variable is missing, show a plain message instead of a blank page.

Remind me to redeploy after adding the variables, since they are read when the app is built.

What Vigilia sees of this

• The missing value itself: “supabaseUrl is required” and its relatives are recognised at once, with no AI credits. See that page.
• The other side of the same mistake: the free launch check reads your live page and flags secret keys that reached the browser.

What it can’t see: A screen that is blank without throwing anything. If the app loads and simply shows nothing where the data should be, there is no error for Vigilia to catch.

More from the error library

• Failed to fetch dynamically imported module
• new row violates row-level security policy (Supabase)
• Supabase “JWT expired”
• FirebaseError: Missing or insufficient permissions
• Stripe “No such price” — a similar object exists in test mode
• Stripe “Invalid API Key provided: pk_…”