Reactでdotenvを使っても環境変数が読み込めずundifinedとなるときのTips

Reactでdotenvを使って、任意のページで環境変数を読み込みたい。でも、なぜかundifinedが返ってくる。そんなときの対処法を紹介します。

確認ポイント

1. 変数はREACT_APP_から始まっているかどうか(例: REACT_APP_FIREBASE_API_KEY)
2. サーバーを再起動したかどうか
3. .envファイルはプロジェクトルートに配置されているかどうか
4. require('dotenv').config()は必要ありません

変数はREACT_APP_から始まっているかどうか

create-react-appを使っていて、.envを使う際に、変数の先頭にREACT_APP_とつけないとundifinedになります。

また、.envファイルはそれぞれの行にコロン(:)、セミコロン(;)をつける必要はありません。

REACT_APP_FIREBASE_API_KEY=xxxxxxxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxxxxxxxxxxx

サーバーを再起動したかどうか

環境変数についてのコードの変更を行った際は、変更を反映するためにサーバーを再起動する必要があります。

Ctrl+Cでサーバーを停止して、npm startやdocker-compose upなどで再起動しましょう。

.envファイルはプロジェクトルートに配置されているかどうか

package.jsonやREADME.md、.gitignoreなどのファイルがあるプロジェクトルートの階層に.envを配置する必要がります。srcフォルダの中ではなく、プロジェクトルートです。

require('dotenv').config()は必要ありません

dotnevは以下のような使い方をしますと公式に書かれています。

sample.js

require('dotenv').config()

しかし、このコードは必要ありません！！

理由は、create-react-appがすでに.envファイルを使えるようにしてくれているからです。(dotenvをインストールした意味がなかった。。😅)

以下のように読み込みたいファイルで直接process.envで読み込めます。

sample.js

const sampleId = process.env.REACT_APP_SAMPLE_ID;

参考

react evironment variables .env return undefined

Reactにおける環境変数を設定について、ようやく理解したので原因と共にまとめてみる_100DaysOfCodeチャレンジ38日目(Day_38:#100DaysOfCode)

create-react-appのプロジェクトで環境変数を.envから読み込めない原因と解決策