SvelteKit environment variables not appearing in prod

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. ???

Have you checked this:

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.

1 Like

Hey there, thanks so much for coming back and sharing this update. Glad you have found a workaround.

Happy building :rocket: