VITE + Reactプロジェクトでprocess.envを使うには

はじめに

どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生(@shunii )です！
今回はvite + Reactプロジェクトにて環境変数を扱う方法で少し行き詰ったのでまとめます。

問題

github actionsで以下のエラーが出た。

 src/utils/supabase.ts:3:29 - error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

以下のsupabase.tsでは.envファイルで定義した環境変数を参照してsupabaseの設定をしている。vite + Reactのプロジェクトではimport.meta.env."環境変数名"で環境変数を参照する必要があるのだが、github actionsではその構文に対応していないことが原因らしい。

supabase.ts

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

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

export const supabase = createClient(supabaseUrl, supabaseKey);

解決策

process.envを使えるようにする

以下の手順でprocess.envを使えるようにしました。

1. vite-plugin-env-compatibleのインストール

   npm i vite-plugin-env-compatible
   

2. vite.config.tsの変更

   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" })],
   });
   

3. supabase.ts ( 任意のファイル ) の変更

   supabase.ts

   import { createClient } from "@supabase/supabase-js";
   
   //process.envでstring以外の値が参照されることはない
   const supabaseUrl = process.env.VITE_SUPABASE_URL as string;
   const supabaseKey = process.env.VITE_SUPABASE_KEY as string;
   
   export const supabase = createClient(supabaseUrl, supabaseKey);
   

終わりに

何度か躓いた場所だったので、自分なりの記録を残せてよかったです。他の解決方法をご存じの方はコメントいただけると幸いです！

About Me

• X(Twitter)

参考