After instaling Node Packages i ReactJS Vite its not run and showing white page due to an error of supabaseUrl:
Uncaught Error: supabaseUrl is required.
means your Supabase client is not getting the project URL, so React loads but crashes — which is why you're seeing a white screen.
This usually happens in a React + Vite setup when environment variables are missing or incorrectly named.
â
Why This Happens
When you initialize Supabase like this:
createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY)
If VITE_SUPABASE_URL is:
â Not defined
â Misspelled
â Not loaded from .env
â Missing the VITE_ prefix
Then Supabase throws:
supabaseUrl is required
ð§ How to Fix It (Step-by-Step)
1ï¸â£ Check Your .env File
Make sure you have a .env file in the root folder (same level as vite.config.js).
It should look like this:
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=your-anon-key
â Important:
Must start with VITE_
No quotes
No semicolon
No spaces around =
2ï¸â£ Restart Your Development Server
After editing .env, always restart:
npm run dev
Vite does NOT reload env variables automatically.
3ï¸â£ Check Your Supabase Config File
Your supabase.js should look like this:
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
4ï¸â£ Debug (Optional)
Add this temporarily:
console.log(import.meta.env.VITE_SUPABASE_URL)
If it prints undefined, your .env is not loading properly.
ð¨ Common Mistakes in Vite
â Using:
SUPABASE_URL=xxxx
Instead of:
VITE_SUPABASE_URL=xxxx
Vite only exposes variables starting with VITE_.
Hi
Create a .env file in your Vite project root (e.g., javascript/vite/ or typescript/vite/) with your Supabase credentials:
Create a .env file in your project root:
If using JavaScript: metronic-react-starter-kit/javascript/vite/.env
If using TypeScript: metronic-react-starter-kit/typescript/vite/.env
Add these environment variables:
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-for-admin-functions
Get Supabase account for free at
Please check the provided README.md
If you want to remove usage supabase usage, please check this link
https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth
Thanks