I'm having this problem for quite a while and want to solve this: According to supbase documentation you create a .env file
VITE_SUPABASE_URL="YOUR_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"
then you call them in supabaseClient.js:
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)
However this doesnt work,I get supabaseUrl is required. and the env variables are not getting exported.
Does anyone know why and how to solve it?
Do I need to install any additional lib?
Thank you in advance
SvelteKit recently added new stores to import env variables, like $env/static/private. To use:
# .env file PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL" PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"
// supabaseClient.js
import { createClient } from '@supabase/supabase-js'
import {PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY} from '$env/static/public'
export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)
This should work, however note your secrets are being exposed in publicly accessible JS files (thus the PUBLIC_ prefix). So it is better to only access supabase from SvelteKit endpoints (which that tutorial doesn't do.) To do this, you should use the $env/static/private store and env variables without the PUBLIC_ prefix. (You will also have to refactor your supabase code to be in a Svelte endpoint, not a Svelte page/component.)
Warning: The SvelteKit API is in flux, and the final v1.0 way to do this may be quite different. The latest SvelteKit already introduced major breaking changes:
I have used the old VITE_SUPABASE_URL + import.meta.env.VITE_SUPABASE_URL method before, so it should work. I'm not sure if SvelteKit disabled this method as they introduced the new env variable stores.
update: If you would like to continue using the old import.meta.env.VITE_SUPABASE_URL method, it may be possible by setting envPrefix in your vite.config.js (Source: https://kit.svelte.dev/docs/configuration#env)