supabase.jsでsupabaseUrlを受け取れず、chrome devツールに「Error: supabaseUrl is required.」が出ている

はじめに

supabaseからのデータを、subapase-clientを利用して使用しようとしたが、うまくいかなかった

問題

supabase.jsでsupabaseUrlを受け取れず、developerツールに以下エラーが出ている。

• src/utils/supabase.js

import { createClient } from "@supabase/supabase-js";

console.log("import.meta.env", import.meta.env);

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

console.log("supabaseUrl", supabaseUrl);
console.log("supabaseKey", supabaseKey);

const supabase = createClient(supabaseUrl, supabaseKey);

export default supabase;

Error: supabaseUrl is required.

解決方法

.envのディレクトリを間違えていた。
src/.envとなっていたが、.envとプロジェクトのルートに置くべきだった。

誤り(src/.envになっている)

おわりに

かなり時間がかかってしまいました。
.envのディレクトリにも気をつけるようにします。