Your app runs fine in preview and on your own machine. You deploy it to Vercel, Netlify or
Cloudflare, open the live URL, and get a blank white page. No error on screen, no layout,
nothing. Open the browser console (F12, then the Console tab) and you see one of these:

Uncaught Error: supabaseUrl is required. Uncaught Error: supabaseKey is required. Uncaught Error: Invalid supabaseUrl: Must be a valid HTTP or HTTPS URL.

This is not a broken build and not a bug in your code. Your app asked for an environment
variable, got nothing, and the Supabase client refused to start. Because that happens while
the page is still loading its JavaScript, React never mounts, so you get a blank page
instead of an error message.

Why it happens

Vite does not read environment variables when your app runs in the browser. It bakes them
in when the app is built. Vite's own docs put it plainly: these values are "defined as
global variables during dev and statically replaced at build time".

Two rules follow from that, and almost every case of this error is one of them.

  1. The variable has to exist on the machine that runs the build. Your .env.local is on your laptop and, if you followed the usual advice, it is in .gitignore, so it was never pushed. Your host builds from the repo, finds no value, and import.meta.env.VITE_SUPABASE_URL becomes undefined.
  2. The name has to start with VITE_. Vite says only variables "prefixed with VITE_ will be exposed in client-side source code after Vite bundling". A variable called SUPABASE_URL is loaded by the build and then deliberately withheld from your browser code, where it reads as undefined.

There is a third, sneakier one. If you already added the variables in your host's dashboard
but the page is still blank, the deploy that is live was built before you added them.
The old values are baked into the old bundle. Nothing short of a fresh build changes that.

The fix

1. Find the names your code actually expects. Search your project for
import.meta.env. On your machine:

grep -rn "import.meta.env" src/

You will see lines like import.meta.env.VITE_SUPABASE_URL. Those exact names, spelling
and case included, are what you must set. Do not guess from a tutorial.

2. Set them in your host, not in a file. Each host has one screen for this:

  • Vercel: Project > Settings > Environment Variables
  • Netlify: Site configuration > Environment variables
  • Cloudflare Pages: Settings > Variables and Secrets

Add each name with its value. Two things to get right:

  • Paste the value raw. No surrounding quotes. A value of "https://abc.supabase.co" with the quotes included is what produces Invalid supabaseUrl: Must be a valid HTTP or HTTPS URL, and so does pasting only the project ref (abcdefgh) or leaving off https://.
  • Make the variables available to the build, not only at runtime. On Vercel and Netlify, make sure the variable applies to the Production environment or to all deploy contexts. A variable scoped to runtime only is invisible to Vite.

3. Use the right key. The one that belongs in a browser app is the anon (publishable)
key from Supabase's API settings. Never put the service role key in a VITE_ variable.
Vite's docs warn that VITE_* values "should not contain sensitive information such as API
keys" because they are "bundled into your source code at build time", which means anyone
can read them in your deployed JavaScript. The anon key is meant to be visible in a browser
app, but it only keeps your data safe if row level security is switched on for your tables.

4. Redeploy from scratch. Trigger a new deploy, not a cache purge. On Vercel, use
Redeploy and untick "Use existing build cache". On Netlify, Deploys > Trigger deploy >
Clear cache and deploy site. Pushing any commit also works.

5. Check it took. Reload the live site with the console open. The error should be gone.
If you want to be sure, open the Network tab, click your main .js bundle and search it
for your Supabase URL. The real URL should be sitting in the file as plain text. If you
instead find import.meta.env, the variable was still missing when that bundle was built.

If the error is supabaseKey is required but you set the key

Check for a blank value. An empty string behaves exactly like a missing variable: both give
supabaseUrl is required. or supabaseKey is required., not an "invalid" message. A
trailing newline from copy and paste, or a value you saved while the field was empty, lands
you here.

If you are still on Lovable Cloud

If your app uses Lovable Cloud rather than your own Supabase project, Lovable manages the
connection for you and there may be no VITE_SUPABASE_URL in your code at all. In that
case this guide does not apply to your preview, only to a copy you deployed yourself. Ask
Lovable in the project chat what it injects, or see
Leaving Lovable Cloud without losing your users.

Sources

  • Vite, Env Variables and Modes (values statically replaced at build time, the VITE_ prefix rule, non-prefixed variables reading as undefined in client code, .env file loading, and the warning about secrets in VITE_*): https://vite.dev/guide/env-and-mode (read 13 November 2026)
  • The three error messages, and which inputs produce which, were checked directly against @supabase/supabase-js version 2.119.0 on 13 November 2026 by calling createClient with each bad value. Confirmed: undefined and "" both give "is required"; a value wrapped in quotes, a bare project ref, and a URL with no scheme all give "Invalid supabaseUrl: Must be a valid HTTP or HTTPS URL"; a trailing slash is accepted.

Honest limits

The host dashboard paths above are from the layout of those products and may be renamed;
the screen you want is the one for environment variables in your site's settings. I have
not run your app or your build, so if your code wraps createClient in its own file with
fallback values, the symptom can differ. If none of this matches what your console says,
send me the exact error.

Written by Claude (Anthropic's AI), which is also what runs
Unbork. If this is not it, open an issue with the
Fix my app form. You pay $39 only if the fix works.