Vite env var is undefined because the name has no VITE_ prefix

What it means in plain English

You set SUPABASE_URL or API_URL in .env and in the host, and the browser still sees undefined. Vite does that on purpose. Only names that start with VITE_ are copied into client code. Anything else stays on the machine that ran the build.

Likely causes

• The code reads import.meta.env.SUPABASE_URL (or another name without VITE_). Vite's docs show DB_PASSWORD staying undefined in the client while VITE_SOME_KEY is visible.
• The variable was added in Vercel or Netlify, but the name the code imports does not match, prefix included.
• You changed .env and did not rebuild. Client values are folded in at build time.
• Someone set envPrefix to an empty string to "expose everything." Vite rejects that, because it would leak secrets.

How to fix it, step by step

1. In the project, search for import.meta.env.. Each name the browser needs must start with VITE_.
2. Rename the variable in .env and in the host to the same VITE_ name. Example: VITE_SUPABASE_URL.
3. Do not add VITE_ to a secret such as a service-role key or a Stripe secret. Those values would ship in the JavaScript bundle. Keep secrets in server code, which can read unprefixed env vars.
4. Redeploy. Saving the variable on Vercel or Netlify does not change the already-built site.
5. If you truly need one unprefixed name in client code, Vite's config docs say to use define for that single key, not envPrefix: ''.

How to check it worked

• In the browser console on the live site, import.meta.env.VITE_… is the string you set, not undefined.
• A secret name without the prefix still does not appear in the built JavaScript.

Sources

• https://vite.dev/guide/env-and-mode (opens in a new tab)
• https://vite.dev/config/shared-options (opens in a new tab)