はじめに

この記事では、React で以下の環境変数読み込みエラーが発生したときの解決方法について記載します。

Uncaught ReferenceError: process is not defined

開発環境

開発環境は以下の通りです。

エラー発生時のコードは以下の通りです。

.env.development

REACT_APP_TEST="test"

App.tsx

console.log(process.env.REACT_APP_TEST);

エラー発生時のコードが Vite を使っているにも関わらず、Create React App での環境変数の書き方だから。

Vite の環境変数の書き方に変更する。

.env.development

VITE_TEST="test"

App.tsx

console.log(import.meta.env.VITE_TEST);