TypeError: Cannot read properties of undefined (reading 'key')
appears when:After deploying to Vercel when the code compiles fine but process.env.X returns undefined at runtime
env variables not loading Vercel
Vercel has three env scopes (Production, Preview, Development) and NEXT_PUBLIC_ values bake into the bundle at build time. Four causes account for every undefined.
NEXT_PUBLIC_ prefix on a client-side variable, or no redeploy since the change. Set it in all three scopes (Production, Preview, Development), add NEXT_PUBLIC_ only for client-readable values, and trigger a fresh deployment so NEXT_PUBLIC_ values bake into the new bundle.Quick fix for env variables not loading
01// lib/env.ts — validate env vars at boot with zod02import { z } from "zod";03 04const envSchema = z.object({05 // Server-only (no NEXT_PUBLIC_ prefix)06 DATABASE_URL: z.string().url(),07 STRIPE_SECRET_KEY: z.string().startsWith("sk_"),08 09 // Client-readable (NEXT_PUBLIC_ prefix required)10 NEXT_PUBLIC_SUPABASE_URL: z.string().url(),11 NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),12 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().startsWith("pk_"),13});14 15export const env = envSchema.parse(process.env);16// Now the build fails loudly if any var is missingDeeper fixes when the quick fix fails
01 · Pull remote env vars locally to confirm they exist
01# Syncs the Production values into a local .env.local02vercel env pull03 04# Verify the expected key is present05grep STRIPE_WEBHOOK_SECRET .env.local02 · Rename a client-side variable to include NEXT_PUBLIC_
01// ❌ undefined in the client bundle02const pk = process.env.STRIPE_PUBLISHABLE_KEY;03 04// ✅ inlined at build time, visible in the browser bundle05const pk = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;03 · Force a fresh deploy with an empty commit
01git commit --allow-empty -m "redeploy to pick up env changes"02git pushWhy AI-built apps hit env variables not loading
Lovable, Bolt, Replit, and Cursor put secrets in .env.local during development — the local convention for every Node.js framework. .env.local is in .gitignore by default. Nothing ever uploads it to Vercel. At deploy, the build succeeds because Next.js only reads real env vars at runtime — absence is not a compile error, just an undefined. The first page that reads the key 500s with Cannot read properties of undefined.
The second pattern is the NEXT_PUBLIC_ prefix. AI-generated code uses process.env.STRIPE_PUBLISHABLE_KEY in a client component without the prefix. On the server the variable resolves; in the client bundle it was stripped at build time because Next.js inlines only NEXT_PUBLIC_-prefixed names. Local dev conflates server and client env aggressively — the bug is invisible until production.
The third structural cause is environment scope drift. Vercel has three independent scopes: Production, Preview, Development. Every variable has three checkboxes. Founders add a variable on a preview branch, check only Preview, and it never reaches Production. When main deploys, the variable returns undefined. Tick all three unless there is a specific reason to differ.
env variables not loading by AI builder
How often each AI builder ships this error and the pattern that produces it.
| Builder | Frequency | Pattern |
|---|---|---|
| Lovable | Every Supabase scaffold | Writes only to .env.local, never copies to Vercel |
| Bolt.new | Common | Ticks only Preview scope, misses Production |
| v0 | Common | Uses process.env.STRIPE_PUBLISHABLE_KEY in client — missing prefix |
| Cursor | Sometimes | Hard-codes secrets rather than reading from env |
| Replit Agent | Common | Sets vars but never redeploys; NEXT_PUBLIC_ stale in bundle |
Related errors we fix
Stop env variables not loading recurring in AI-built apps
- →Validate process.env with zod at boot — missing vars fail the build instead of 500ing at runtime.
- →Tick all three Vercel scopes (Production, Preview, Development) unless there is a specific reason not to.
- →Never put a secret behind NEXT_PUBLIC_ — it ships to every browser.
- →Trigger a redeploy after every env change; an empty commit is cheap insurance.
- →Keep a single source of truth for env vars (Doppler, Infisical, or Vercel dashboard) — not .env.local.
Still stuck with env variables not loading?
env variables not loading questions
Why is process.env.MY_KEY undefined in Vercel production?+
What does NEXT_PUBLIC_ actually do?+
Do I need to redeploy after adding an env var?+
Why does my env var work locally but not on Vercel?+
How long does this take to fix?+
Ship the fix. Keep the fix.
Emergency Triage restores service in 48 hours. Break the Fix Loop rebuilds CI so this error cannot ship again.
Hyder Shah leads Afterbuild Labs, shipping production rescues for apps built in Lovable, Bolt.new, Cursor, Replit, v0, and Base44. our rescue methodology.