.envファイルがあるのにprocess.envで参照できなかった件

はじめに

どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生です！
現在Reactでアプリ開発をしているのですが、jestを用いてテストを行おうとしたところエラーが出てうまくいかなかったのでまとめます。

問題

下記のようなエラーが出た

supabaseUrl is required.

僕が開発しているアプリではsupabaseを利用しているのですが、そのsupabaseのクライアントの初期化するファイルでエラーが出ているようです。supabaseのurlやanon_keyに関しては.env.localで管理しています。

supabase.js

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

export const supabase = createClient(
    //.env.localファイルで環境変数を定義しています。
    process.env.VITE_SUPABASE_URL,
    process.env.VITE_SUPABASE_URL
);

.env.local

VITE_SUPABASE_URL=[秘匿情報]
VITE_SUPABASE_ANON_KEY=...[秘匿情報]

仮説

エラー内容によると...

supabaseのurlは必須やよ！絶対ないとあかんよ！

というように怒られてしまっているので、process.env.VITE...の部分で環境変数をうまく参照できていないことが考えられます。

解決策

結論
.env.localを.envという名前に変更した

原因

以下はjestの設定ファイルです。(jest.config.mjsは割愛させていただきます)

jest.setup.js

import "@testing-library/jest-dom";

// dotenvの設定
require("dotenv").config();

requireのところでdotenvのモジュールを呼び出し、環境変数をprocess.envで参照できるように設定しています。
しかし、dotenvはデフォルトでは

設定が呼び出された作業ディレクトリ内の.envを探す
という仕様になっているようです。

以下のように記述することもできますが、ファイル名で指定してしまうと今後めんどくさいことになってきてしまうので僕は上記の方法で解決しました。

jest.setup.js

import "@testing-library/jest-dom";

// dotenvの設定
require("dotenv").config({path: ".env.local"});

※このように記述すると.env.localを探してくれるようになるのですが、この後僕はgithub actionsで自動テストを実装しようとしているのでこの方法はやめました。実際に.env.localはpushしないので、
のちにgithub actionsでこんなファイルはないよ!!!!!と怒られてしまうので(汗

.envの種類

調べている中で気になった内容があったので共有します。特にReactなどとは関係なくプログラミング自体の仕様にこういったものがあるらしいです。

.env→開発環境でも本番環境でも読み込まれる。
.env.local→開発環境でも本番環境でも読み込まれる。
.env.development→開発環境だけで読み込まれる。
.env.production→本番環境だけで読み込まれる。

優先順位
こちらの記事から引用

参考

終わりに

最初の記事投稿から出会ったエラーの中で一番苦しんだので、解決することが出来て記事にできてよかったです。
この記事が他のどなたかを救ってくれるといいなと思います。

About Me

• Twitter