はじめに
ViteでReactを選択しプロジェクトを作成していた。
APIキーを環境変数として扱いたかったので.envファイルを作成し、
環境変数を作成したつもりだったが、読み込みができておらずエラーが発生した。
結論
環境変数のプレフィックスには「REACT_APP_」ではなく、
「VITE_」 をつける必要がある。
環境
- Vite: 5.0.8
- Raect：18.2
- typescript：5.2.2
- tailwindcss：3.4.1
エラー内容
APIを叩く関数の中に環境変数に設定していたAPIキーを読み込む処理を書いていた。
関数を実行したところ、リクエストを送ることができない。
APIキーを読み込めているか確認したところ、
undefinedで読み込めていなかった。
原因
Reactで環境変数を設定するにはプレフィックスに、
「REACT_APP_」をつける必要があります。
以下がその例です。
.evv
REACT_APP_HOGE_SOME_KEY=Hello123World
しかし、今回はViteプロジェクトです。
以下のドキュメントを確認したところ、
Viteで作成したプロジェクトにおいては、
環境変数のプレフィックスには「REACT_APP_」ではなく、
「VITE_」 をつける必要がありました。
実施した事
プレフィックスにVITE_を変更。
.evv
VITE_HOGE_SOME_KEY=Hello123World
この状態で再度確認したところ、問題なく読み込めておりました。
const API_KEY: string = import.meta.env.VITE_HOGE_SOME_KEY;
参考