【Vite+Supabase】Uncaught Error: supabaseUrl is required.

はじめに

環境変数ファイルを作成時につまったので記事にします。

問題

正しいURL、キーを入力したはずなのに表題のエラーがでる

解決方法

環境変数名を.envで定義したものと違うものを指定していた。

.env

VITE_SUPABASE_URL='https://~'
VITE_SUPABASE_ANON_KEY=キー

supabase.ts

import { createClient } from '@supabase/supabase-js'

- export const supabase = createClient(import.meta.env.VITE_SUPABASE_URL!, import.meta.env.VITE_SUPABASE_KEY!)
+ export const supabase = createClient(import.meta.env.VITE_SUPABASE_URL!, import.meta.env.VITE_SUPABASE_ANON_KEY!)

+ // 環境変数が正しく設定されていることを確認
+ console.log("Environment Variables:", import.meta.env);

おわりに

学んだこと
VITEプロジェクトの場合、環境変数の先頭にVITE_をつける
環境変数を読み込む際はimport.meta.env.環境変数名にする
process.env.環境変数名にしたい場合はこちら の記事を参考に設定を変える

参考