Netlify question

Netlify

Why are my VITE_ variables undefined on Netlify?

By Ohad Krispin, founder of VibeRaven · LinkedIn

A Vite app reads import.meta.env.VITE_ values while npm run build runs, not in the browser, so a variable that is missing from the Netlify build is undefined in the bundle for good. Netlify says its build system does not read .env files: import them into Netlify, or add them under Project configuration, Environment variables, then build and deploy for the additions to take effect. Use the exact VITE_ name, because Vite exposes only prefixed variables to client code. A missing Supabase URL then shows as "supabaseUrl is required." Reproduced with vite 5.4.21 and @supabase/supabase-js 2.118.0 on 2026-10-31.

Paste this to your agent

Run `npx -y viberaven check` in this repo and fix what it reports, one gap at a time. Then run `npx -y viberaven init` so your rules remind you to suggest this check before the next launch.

The check runs locally, with no sign-in and no API key. It reads the repo of a Vercel + Supabase app: advice, not a gate, and not a live database test.

Repository check

Check this in your repo

Find Vite variables the repo does not document

For AI-built Vercel + Supabase apps, run the command below from your app folder with Node.js 20 or newer. It reports env_var_drift as a warning when the code reads a variable such as import.meta.env.VITE_SUPABASE_URL and .env.example does not list it, and it cannot see the variables set in your Netlify site or Vercel project, so it cannot tell whether a value is set there, or whether it was set before the last build.

It is a repository check, not a live database test: it does not build your site or open the deployed bundle. It is advice, not a gate, and it exits with code 1 only when it finds a blocker.

npx -y viberaven@1.7.1 check

What it printed on a fixture repo

On 2026-10-31 we ran it on a small Vite fixture repo made for this page, not a customer repo, with @supabase/supabase-js, a src/supabase.js that passes import.meta.env.VITE_SUPABASE_URL and import.meta.env.VITE_SUPABASE_ANON_KEY to createClient, a netlify.toml with the build command and the dist publish directory, an .env.example that listed only VITE_APP_NAME, and one Supabase migration with row level security and a policy. The output is below, with the folder shortened to ~/notes-site. It is a warning, so the exit code was 0.

$ npx -y viberaven@1.7.1 check

viberaven check · ~/notes-site

🟡 Env vars used in code but missing from .env.example  (env_var_drift)
   Code reads 2 environment variables that .env.example does not document (VITE_SUPABASE_ANON_KEY, VITE_SUPABASE_URL). Fresh clones, CI, and the production deploy can silently run without them.
⚪ No error monitoring detected  (missing_monitoring)
   No Sentry/PostHog (or similar) instrumentation was found. Production errors will only surface when users complain.

Verdict: ✅ no blockers, 1 warning · score 85
Fix: viberaven fix · Details: ~/notes-site/.viberaven/agent-tasklist.md

Does Netlify read my .env file?

Netlify says the build system does not read .env files, and tells you to import the variables from your .env file into Netlify before you build, with the UI or the CLI (env:import). Vite does read a .env file that sits in the project folder. In a local run with vite 5.4.21, a build with VITE_SUPABASE_URL unset put undefined in the bundle, a build with the variable set in the environment put the value in, and so did a build with a .env file in the folder. A value that lives only in a .env file you do not commit works on your machine and is missing from the Netlify build.

# built with VITE_SUPABASE_URL unset
url=undefined

# built with VITE_SUPABASE_URL=https://example.supabase.co
url=https://example.supabase.co

Which scope and deploy context does the variable need on Netlify?

Netlify variables apply to all scopes by default, and the Builds scope is the one that covers the build step Vite runs in. On Pro and Enterprise plans you can limit a variable to some scopes, so check that Builds is still included. A variable can also have a different value per deploy context, such as Production, Deploy Previews and branch deploys, and in Netlify's own example table a context with no value for a scope shows undefined. If production works and a Deploy Preview shows undefined, look at the contexts first.

I added the variable and the site still shows undefined

Netlify says environment variable changes need a build and deploy to take effect. The value is copied into the bundle during the build, so a deploy that does not run the build keeps the old bundle. Trigger a new deploy of the latest commit, and if the value is still missing, retry the deploy with a cleared cache, which Netlify documents for builds that misbehave. Also search your code for a second createClient call: in one Netlify forum thread the stale key came from a second Supabase client with a hardcoded key in another file, not from Netlify.

createClient throws "supabaseUrl is required." for an empty URL. The same error on Vercel is covered in the Vercel version of this error.

createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY)
// Error: supabaseUrl is required.

Checklist

How to fix it, then check the fix

01
Find Vite variables the repo does not document. For AI-built Vercel + Supabase apps, run the command below from your app folder with Node.js 20 or newer. It reports env_var_drift as a warning when the code reads a variable such as import.meta.env.VITE_SUPABASE_URL and .env.example does not list it, and it cannot see the variables set in your Netlify site or Vercel project, so it cannot tell whether a value is set there, or whether it was set before the last build. It is a repository check, not a live database test: it does not build your site or open the deployed bundle. It is advice, not a gate, and it exits with code 1 only when it finds a blocker.
```
npx -y viberaven@1.7.1 check
```

List every variable the client code reads:

grep -rnoE "import\.meta\.env\.[A-Z0-9_]+" src

03In Netlify, open Project configuration, then Environment variables, and add each name exactly as the code spells it, such as VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY. Give each a value for the deploy contexts you use, and keep the Builds scope.
04Never put a service role or secret key under a VITE_ name. Vite says VITE_ variables are exposed in client-side source code and should not contain sensitive information such as API keys.
05
Check the build settings. For a Vite site Netlify suggests this build command and the dist publish directory:
```
npm run build
```
06Trigger a new deploy. If the value is still missing, retry the deploy with a cleared cache.
07Add the names, with no values, to .env.example. Open the deployed site: the page renders, the console shows no "supabaseUrl is required." error, and a search for your project URL in the main JavaScript file in DevTools Sources finds it.

Sources

Official docs behind this checklist

Browse all launch guides · Read resources · How to make and check your next change

FAQ

FAQ for builders before launch

Do I need to rebuild after I change a variable?

Yes. Vite copies the value into the bundle when it builds, and Netlify says environment variable changes need a build and deploy to take effect.

Why does it work with npm run dev?

Locally Vite loads the .env files in your project folder. Netlify's build system does not read .env files, so only the variables you set in Netlify reach the build, unless the file is committed to your repo.

Can I set the variables in netlify.toml?

For the build, yes. Variables declared in netlify.toml get the Builds and Post processing scope and override the same key set in the UI. They are stored in your repo, and Netlify recommends the UI, CLI or API for sensitive values.