Error: supabaseUrl is required. (Vite env var missing VITE_ prefix, blank screen in production)
supabase-js throws this when the URL it receives is empty, usually because Vite only exposes VITE_-prefixed environment variables to client code: SUPABASE_URL becomes undefined in the browser and the app can crash to a blank screen. Rename the variable to VITE_SUPABASE_URL, read it via import.meta.env.VITE_SUPABASE_URL, set it on your host, and rebuild.
Cause: The variable is missing the VITE_ prefix (or was not set at build time), so Vite never inlines it into the bundle.
How to fix it
- Rename client-side variables to start with
VITE_in.envand in your host's dashboard. - Read them with
import.meta.env.VITE_*, notprocess.env. - Remember values are inlined at build time: set them before the build, then redeploy.
- Only expose public values (e.g. Supabase anon key). Never prefix server secrets with
VITE_; anythingVITE_ships to the browser.
Example
Illustrative example, not from a customer project.
- SUPABASE_URL=https://xyz.supabase.co
+ VITE_SUPABASE_URL=https://xyz.supabase.co
- const url = process.env.SUPABASE_URL
+ const url = import.meta.env.VITE_SUPABASE_URL
FAQ
Why does it work locally but not in production?
Your local .env is read at dev time; the production build only gets variables set in the host's build environment, and only VITE_-prefixed ones reach the client.
Can I put my Stripe secret key in a VITE_ variable?
No. Every VITE_ variable is embedded in the public JavaScript bundle. Keep secrets on the server.
Get a $149 diagnosis See pricing Launching soon? The Launch Path gets you ready for $1,195 flat.
- Fixed, or we keep working free until it is (within the written scope).
- A human reviews every fix before it ships.
- read-only access; fixes arrive as pull requests you merge
- Your $149 diagnosis is credited in full toward any paid job.