Environment variables are undefined in production

What it means in plain English

Your app reads settings (API keys, URLs) from "environment variables". On your computer they come from a .env file. That file is deliberately not uploaded, so the live site has none of them unless you add them to your hosting provider.

Likely causes

• The variables were never added in Vercel/Netlify project settings.
• Browser code reads a variable without the required prefix. Vite only exposes variables starting VITE_; Next.js only exposes NEXT_PUBLIC_ variables to the browser.
• You added the variable but didn't redeploy. Browser variables are baked in at build time.
• The variable was added only for Preview, not Production (or the other way round).
• The AI assistant invented a variable name that doesn't match the one you set.

How to fix it, step by step

1. Find the exact names your code uses: search the project for import.meta.env. (Vite) or process.env. (Next.js).
2. Vercel: Project → Settings → Environment Variables → add each name and value, tick Production (and Preview if needed).
3. Netlify: Site configuration → Environment variables → add each one.
4. If the value is needed in the browser, the name must start with VITE_ (Vite/Lovable/Bolt) or NEXT_PUBLIC_ (Next.js/v0). Never put secret keys behind these prefixes: anything prefixed ends up in public JavaScript.
5. Trigger a new deployment (Vercel: Deployments → ⋯ → Redeploy). Changes don't apply to old deployments.
6. In Cursor, tell the AI: "Only use these env var names: …, never invent new ones."

How to check it worked

• Redeploy and reload with cache disabled; the feature using the variable should work.
• In Vercel, open the deployment's Build Logs and confirm no 'missing env' warnings.

Sources

• https://vercel.com/docs/environment-variables (opens in a new tab)
• https://vite.dev/guide/env-and-mode (opens in a new tab)
• https://nextjs.org/docs/app/guides/environment-variables (opens in a new tab)