In local dev, no problem, but once deployed to Netlify, I get an error Uncaught Error: supabaseUrl is required
on https://smileforms.ca/beacon-hill-dental-43177/intake
Code in question:
import { createClient } from '@supabase/auth-helpers-sveltekit';
import { env } from '$env/dynamic/public';
const supabaseClient = createClient(
env.PUBLIC_SUPABASE_URL ?? '',
env.PUBLIC_SUPABASE_ANON_KEY ?? '',
{
persistSession: true,
autoRefreshToken: true
}
);
How should I set them in Netlify?
One thing I noticed, in dev
(localhost), works fine with credentialed Supabase clients for both server and client (hooks). The problem / error message is in Netlify deploy—hooks.client.ts
is unable to know what the env
variable for supabaseUrl is. That is, the env variables are not trickling down to client-side. ???
SOLVED!
In case anyone runs into this, that is, npm run build
either locally or in production (Netlify for me), the solution is to change db.ts
from
import { createClient } from '@supabase/auth-helpers-sveltekit';
import { env } from '$env/dynamic/public';
export const supabaseClient = createClient(
env.PUBLIC_SUPABASE_URL ?? '',
env.PUBLIC_SUPABASE_ANON_KEY ?? ''
);
to
import { createClient } from '@supabase/auth-helpers-sveltekit';
import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
export const supabaseClient = createClient(
PUBLIC_SUPABASE_URL ?? '',
PUBLIC_SUPABASE_ANON_KEY ?? ''
);
Production builds do not have access to dynamic variables in client-side (browser) Javascript at runtime.
Hey there, thanks so much for coming back and sharing this update. Glad you have found a workaround.
Happy building