Environment variables work locally but are undefined in production

Everything works on localhost. In production the app crashes, shows a blank screen, or silently fails to reach its API - because the variable it needs is undefined.

Two distinct causes get confused. First: the key set in the host's dashboard is not byte-identical to the one in the local .env - a typo, a trailing space, a different name. Second, and specific to bundlers: Vite only exposes variables prefixed VITE_ to client code, and Next.js only exposes NEXT_PUBLIC_. An AI generator will happily write process.env.API_KEY into a component, which is undefined in the browser by design. The community names this as THE signature AI-app bug: 'the only real headache with ai-generated apps is environment variables, so just make sure your local .env keys exactly match what you paste into vercel/railway'.

Verify the variable names match exactly between .env and the host dashboard. For client-side access, prefix with VITE_ (Vite) or NEXT_PUBLIC_ (Next.js) and rebuild - env changes do not apply to an existing build. If the value is a secret, it must NOT be client-exposed; move the call server-side instead. See the api-key-exposed-in-client-bundle record.