SvelteKit with Vercel and Supabase

I've been learning how to create SvelteKit apps with Vercel and Supabase, and although the Supabase docs are great, there's a couple gotchas. If you follow the Supabase Quickstart for SvelteKit, it starts by asking you to create a SvelteKit Skeleton Project. It says you don't need typescript, which is true in general, but the example files in the quickstart do use typescript. So to start off as smoothly as possible, you should choose Yes, using Typescript syntax when creating the SveltkeKit app.

The most important gotcha is in creating src/lib/supabaseClient.ts, which according to the quickstart should be

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)

My experience was this worked locally but not in production, and I couldn't definitively determine why. I believe it has to do with server side rendering working differently in the two environments. You get a supabaseUrl is required error, and there are various reports of problems around this scenario online. Some of the solutions seems to be red herrings for this exact configuration, like using .env.local rather than .env, or prefixing the environment variables with NEXT_, which don't apply to SvelteKit. I got it working with the following supabaseClient.ts

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)

It's not clear why the server side version is necessary; it may have to do with the build process, and something that needs to be done differently with Vercel. Note that I also had to add these two environment variables to the Vercel settings. That may be fairly obvious, but still worth noting when just following the Supabase quickstart guide.