Reactで.envがどうしても読めなかった時に試してみるといいかもしれないこと

Reactで環境変数を.envファイルから読み込みたかった時の話です。
どうにかした軌跡を置いておきます。

TL;DR

• webpack.config.js内に設定を追加した
• dotenv-webpackはなんかのタイミングで入ってたけど、入ってなければ入れるとよいと思います
  • 僕はたぶんbabelかstorybook入れたとき入った

webpack.config.js

const Dotenv = require('dotenv-webpack');

plugins: [
  new Dotenv()
],

// なんか言われたら
node: {
  fs: 'empty'
}

ざっくり環境

• create-react-appした
• webpack-dev-serverで動かしてる
• .envのREACT_APP_HOGE_KEYがundefinedになる

経緯

公式に従って設定してみたのですが、どう頑張ってもundefinedになりました。
プロジェクトのルートに .env ファイルを作り、REACT_APP_から始まるものを定義すればいいよと書いてあります。適当にググってもそんな感じの内容が出てきます。
https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

でもダメでした。

デフォで入ってるのでダメなら改めて自分で入れてみるかぁと思い調査。

結論

明示的にdotenv-webpackを利用することに。
公式: https://www.npmjs.com/package/dotenv-webpack
参考: Can't resolve 'fs' https://megu-tech.hatenablog.com/entry/2019/10/09/170631

webpack.config.jsに設定を追加。

webpack.config.js

const Dotenv = require('dotenv-webpack');

plugins: [
  new Dotenv()
],

// なんか言われたら
node: {
  fs: 'empty'
}

で読めるようになりました。webpack絡みでなんか起きてるのかなと思いつつも学びきれてなさみです。