Uncaught ReferenceError: process is not definedが表示される

初めに

元医療職 → WEB制作者がReact開発で詰まった箇所を日々発信しています！
現在はJISOUというコミュニティに所属してReact開発を学習中。
今回はsupabaseのデータを取得する際に、タイトルのエラーが出たのでまとめます。

問題点

supabaseからデータを引用する際にsupabase URLとsupabase API KEYを用いるかと思います。
そこで.envファイルを作成して以下の内容を記述

VITE_SUPABASE_URL = supabaseのURL
VITE_SUPABASE_ANON_KEY = supabaseのAPI KEY

supabaseのファイル内に以下を記述

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

const SUPABASE_URL = process.env.VITE_SUPABASE_URL as string;
const SUPABASE_ANON_KEY = process.env.VITE_SUPABASE_ANON_KEY as string;

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

これでローカル環境でページを確認するとコンソールにエラーが出ています。
「Uncaught ReferenceError: process is not defined」

直訳でprocessが定義されていないと出ています。
これはviteでは.envファイルが利用できない？ことが原因だそうです。

解決方法

.envファイルを利用するには以下の手順を踏みます。

1. 以下をターミナルに入力
npm i vite-plugin-env-compatible

2. vite.config.tsファイル内を以下の記述に変更

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import env from "vite-plugin-env-compatible";

export default defineConfig({
    plugins: [react(), env({ prefix: "VITE", mountedPath: "process.env" })],
});

終わりに

今まで何度も動画講義でやっていたのですが、いざ自分でやるとなると全く覚えていませんでした。
やはり動画の講義だけだと頭に残らないですね...
自分の手を動かして初めて自分が理解できていないところを理解しました。
アウトプット大切！！！