ローカル環境で『supabaseUrl is required.』エラーが出た際に.envファイルの命名で確認すべきこと

はじめに

こんにちは。
Viteの開発環境(npm run devで出るローカル環境)上で、環境変数をenvで設定してsupabaseからデータを呼び出そうとした時にsupabaseUrl is required.のエラーが発生しました。
解決策が見つからずハマってしまったので共有の意味もこめて記事化します。

エラーが起きたコード

環境変数

.env.production

VITE_SUPABASE_URL=(supabaseのプロジェクトから引用したURL)
VITE_SUPABASE_ANON_KEY=(supabaseのプロジェクトから引用したanon key)

呼び出し先

Supabase-function.ts

import { Supabase } from "../utils/Supabase";

export const getData = async ()=>{
    const response = await Supabase.from('study-record-ts').select("*");
    
    if(response.error){
        throw new Error(response.error.message);
    }
    
    return response.data;
}

app.tsx

import { Button } from '@chakra-ui/react'
import './App.css'
import { getData } from "./utils/Supabase-function"

// 呼び出し確認のためにconsoleを使う
console.log(getData);

function App() {

  return (
    <>
      <h1>title</h1>
    </>
  )
}

export default App

このconsole.logの出力結果を見ようとするとsupabaseUrl is required.となっていた。

エラーの原因

環境変数を設置するファイル名を.envではなく.env.productionとしていた。

.env.productionは本番環境用の環境変数を設定するためのファイルであり、buildした場合でないと環境変数として読み込む対象にならない。

解決方法

開発環境で環境変数を設定する際はファイル名を.envもしくは.env.localとする。
そうすることでnpm run dev下のローカル環境でも環境変数(supabaseUrl)が読み込まれるようになる。

最後に

.envファイルの命名については既存の記事がなく、かつあまり意識していなかった点で見落としていました。
皆さんも環境変数の設定ファイルの命名はチェックしておきましょう。

参考資料