How to Fix “supabaseUrl is required” in a Supabase Vite Project

Introduction

After launching the app with Vite + Supabase, the following error occurred:

Uncaught Error: supabaseUrl is required
at supabase.ts:6:25

Cause

The supabaseUrl and supabaseAnonKey passed to supabase.createClient were undefined.
This means the environment variables (.env) were not being read correctly.
This is often caused by incorrect environment variable configuration.

.env file is not in the correct location
Environment variable names lack the VITE_ prefix
Not restarted

Solution

1. Create a .env file directly in the project root directory

VITE_SUPABASE_URL=https://xxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOi...

Ensure the VITE_ prefix is included
Vite does not expose environment variables without the VITE_ prefix to the frontend.

2. Configure the Supabase client

import { createClient } from “@supabase/supabase-js”;

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

3. Add .env to .gitignore

.env

→ This prevents credentials from being uploaded to GitHub.

4. Restart the development server

npm run dev

Summary

“supabaseUrl is required” indicates environment variables are not being loaded.

Place .env directly in the project root directory.

Always include the VITE_ prefix.

Translated with DeepL.com (free version)