これは React Advent Calendar 2022 7日目の記事です。
Recoilを使っているアプリケーションでWebpackのDefinePluginを使って環境変数の値をビルド時に埋め込むとき、Webpackの設定によっては環境変数の名前がビルドしたコードに含まれてしまう場合があります。
具体的には、以下のようにDefinePluginの process.env キーに対してobjectを渡す場合に発生しえます。
new webpack.DefinePlugin({ 'process.env': { FOO: JSON.stringify(process.env.FOO), }, });
ここでRecoilのコードを見てみましょう。ランタイムに process.env の値を参照するコードがあるのに気づくと思います。
optional chainingをトランスパイルすると、ビルド成果物内の process.env という式がDefinePluginにより {FOO: JSON.stringify(環境変数FOOの値)} というオブジェクトに置換されます。DefinePluginに process.env.FOO といったキーで環境変数の値を渡した場合は埋め込まれません。
Webフロントエンドアプリケーションのビルド時に環境変数の値を埋め込む際には気をつけましょう。DefinePluginの設定を見直したり、あるいは環境変数の名前として外部に露出しても支障のないものにしたりなど……。
2022/12/7 23:39 追記
Recoilとwebpack.DefinePluginと環境変数の名前 - 私が歌川ですb.hatena.ne.jp
- [webpack]
process.env で置換すると実行時に差し込まれる環境変数も巻き込まれてしまうので、そういう意味でも process.env.FOO 形式じゃないと駄目そう。EnvironmentPlugin という専用のものがあってそっちがオススメです。
2022/12/07 23:21
EnvironmentPluginは初めて知りました。明らかにDefinePluginで環境変数を差し込むユースケースを代替することが意図されていてよさそうですね。
The EnvironmentPlugin is shorthand for using the DefinePlugin on process.env keys.
