More than 5 years have passed since last update.

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

Posted at 2020-12-22

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

確認ポイント

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

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

.env

REACT_APP_FIREBASE_API_KEY=xxxxxxxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxxxxxxxxxxx

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

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

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

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

sample.js

require('dotenv').config()

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

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

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

sample.js

const sampleId = process.env.REACT_APP_SAMPLE_ID;