はじめに
環境変数を使いたいと思い軽く調べたが、サンプル1のREADMEに詳しい使い方が書いていないため戸惑った。
当たり前だが、やりたいことがあったら最初から公式ドキュメント2をよく読もう。
問題
.env に定義した環境変数が何故か読み込めない
.env
HOGE=hoge
FUGA=fuga
呼び出し側
console.log(process.env.HOGE);
// output: undefined
console.log(process.env.FUGA);
// output: undefined
解決方法
公式ドキュメントに「PLASMO_PUBLIC_ プレフィックスがついてる環境変数だけ読み込まれます」と、しっかり書いてある。
Only env vars prefixed with
PLASMO_PUBLIC_will be injected.
解決方法は「全ての環境変数に PLASMO_PUBLIC_ プレフィックスを付ける」
環境変数を編集した後は再度 pnpm dev を実行してdevサーバーを再起動してください
.env
# プレフィックスをつける
PLASMO_PUBLIC_HOGE=hoge
PLASMO_PUBLIC_FUGA=fuga
呼び出し側
console.log(process.env.PLASMO_PUBLIC_HOGE);
// output: hoge
console.log(process.env.PLASMO_PUBLIC_FUGA);
// output: fuga
解決。
おわりに
公式ドキュメントをよく読もう。 (n回目)
参考
※記事の構成についてはこちらの記事を参考にさせていただきました。