ViteEnv varsReact

import.meta.env.VITE_... is undefined (Vite, Lovable, Bolt)

import.meta.env.VITE_API_URL is undefined

In short: Vite only exposes variables that start with VITE_ to client code, via import.meta.env, not process.env.

Why it happens

Vite apps (Lovable and Bolt projects are typically Vite) don't have process.env in the browser. Variables without the VITE_ prefix are deliberately hidden from the client bundle. Values are inlined at build time.

How to fix it

1. Rename the variable to start with VITE_ in .env (for example VITE_API_URL).
2. Read it as import.meta.env.VITE_API_URL. Replace any process.env references in client code.
3. Restart the dev server after editing .env.
4. On your host, set the same variable and rebuild.
5. For TypeScript autocomplete, declare it in src/vite-env.d.ts under ImportMetaEnv.

Copy-paste fix prompt

I'm getting this error in my app:

import.meta.env.VITE_API_URL is undefined

[Paste the full error, stack trace, and the file it points to here]

Likely cause: Vite only exposes variables that start with VITE_ to client code, via import.meta.env, not process.env.

Task: Replace process.env usage in client code with import.meta.env, make sure each public variable has the VITE_ prefix, and move any secret-key usage to a server or edge function.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Lovable, Bolt, Cursor. Last reviewed 2026-11-13.