⚡

React+Viteで環境変数を使う

に公開
React
Vite
tech

はじめに

Stackblitz上で環境変数を使おうとして若干苦戦したので、備忘録も兼ねて投稿します。
Auth0でのログインを実装しようとして、こちら参考にdomainやclientIdをコード上に直接記述せず、環境変数で管理したいと思っていました。

利用していた環境

  • Stackblitz
  • React(typescript) + Vite

結論

Vite環境で.envファイルに記述された環境変数を利用する際には、

  • VITE_プレフィックスをつけて環境変数をセットする
  • import.meta.env.{環境変数名}を使う

経緯(解決するまでに試したこと)

ここからは備忘録です。(読み飛ばしても大丈夫です)
最初は冒頭に貼ったリンク先の記事の通りに、process.env.{環境変数名}で実装しようとしていました。

.env
REACT_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
REACT_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:4040/callback
環境変数の呼び出し
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;

まず、この段階で@types/nodeをインストールしてみては？とエディタに提案されたのでインストールしました。
エディタ上ではエラーなくなったのですが実際previewで見ると今度はコンソール上でUncaught ReferenceError: process is not definedって表示されてうまく動きませんでした。
色々調べるうちに、どうやらprocessはNode.js専用のオブジェクトであり、Viteではimport.meta.envを使うのだと知りました。
Viteのドキュメントでも環境変数の使い方について記述があり、下記の通りに修正してようやくアプリが動くようになりました。

.env
VITE_AUTH0_DOMAIN=AUTH0-DOMAIN
VITE_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
VITE_AUTH0_CALLBACK_URL=http://localhost:4040/callback
環境変数の呼び出し
const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
const redirectUri = import.meta.env.VITE_AUTH0_CALLBACK_URL;

Discussion