はじめに
この記事では、React で以下の環境変数読み込みエラーが発生したときの解決方法について記載します。
Uncaught ReferenceError: process is not defined
開発環境
開発環境は以下の通りです。
- Windows11
- React 18.2.0
- Vite 5.1.7
エラー発生時のコード
エラー発生時のコードは以下の通りです。
.env.development
REACT_APP_TEST="test"
App.tsx
console.log(process.env.REACT_APP_TEST);
原因
エラー発生時のコードが Vite を使っているにも関わらず、Create React App での環境変数の書き方だから。
解決方法
Vite の環境変数の書き方に変更する。
-
REACT_APP_[hoge]をVITE_[hoge]に変更 -
process.env.REACT_APP_[hoge]をimport.meta.env.VITE_[hoge]に変更
.env.development
VITE_TEST="test"
App.tsx
console.log(import.meta.env.VITE_TEST);
