Sveltekit,Supabase and Vercel (problem with Supabase when deploying to Vercel)

Question

I'm trying to set up Sveltekit, Supabase and Vercel. It works correctly on a local environment (SvelteKit and Supabase), but when I deploy it to Vercel there is a problem with Supabase - "Error: supabaseUrl is required" (I post a screenshot below). If I don't use Supabase, there are no problems with deploying to Vercel. Please someone if you have encountered a similar one or have a suggestion to share.

Answer 1

I finally got this to work after doing a couple of things I pieced together from a few sources.

First, I added the the environment variables in Vercel just as the were in the .env file. For example, VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY along with their values.

Next, I added some code in the svelte.config.js file. The result of the file looks like this:

import adapter from '@sveltejs/adapter-auto'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    vite: {
      define: {
        'process.env': process.env,
      },
    },

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
}

export default config

I redeployed the project at Vercel, and it worked.

Answer 2

You should add your Supabase URL and Supabase ANON KEY to vercel and stick to the format given below VITE_SUPABASE_URL,VITE_SUPABASE_ANON_KEY if you have initialized according to the supabase guide.

More than adding the configuration to your svelte.config.js file, you should emphasize on adding environment variables to your Vercel environment if you have added this file

// utils/supabase.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)