💨

環境変数読み込みエラー: Uncaught ReferenceError: process is not defined

2022/06/20に公開

Firebase

環境変数を読み込もうとしたらprocess is not definedとなったので修正します。
webpack5からNode.jsのpolyfillが自動挿入されなくなった模様です。

Automatic Node.js Polyfills Removed
In the early days, webpack's aim was to allow running most node.js modules in the browser, but the module landscape changed and many module uses are now written mainly for frontend purposes. webpack <= 4 ships with polyfills for many of the node.js core modules, which are automatically applied once a module uses any of the core modules (i.e. the crypto module).

While this makes using modules written for node.js easy, it adds these huge polyfills to the bundle. In many cases these polyfills are unnecessary.

webpack 5 stops automatically polyfilling these core modules and focus on frontend-compatible modules.

非推奨になったpllyfillはこちらから参照できます。

DefinePluginを使って設定する

yarn add -D dotenv

webpack.config.jsにpluginとして追加します。

webpack.config.js

+ const dotenv = require('dotenv')
+ const env = dotenv.config().parsed;

 plugins: [
+ 　　　new webpack.DefinePlugin({
+ 　　　　'process.env': JSON.stringify(env),
+ 　　}),
  ]

.envファイルの記述はこんな感じです。

.env

REACT_APP_FIREBASE_APIKEY="*****"
REACT_APP_FIREBASE_DOMAIN="*****"
REACT_APP_FIREBASE_DATABASE="*****"
REACT_APP_FIREBASE_PROJECT_ID="*****"
REACT_APP_FIREBASE_STORAGE_BUCKET="*****"
REACT_APP_FIREBASE_SENDER_ID="*****"
REACT_APP_FIREBASE_APP_ID="*****"
REACT_APP_FIREBASE_MEASUREMENT_ID="*****"

firbaseConfigで設定した環境変数をセットします。

firebaseConfig.js

const {
  REACT_APP_FIREBASE_APIKEY,
  REACT_APP_FIREBASE_DOMAIN,
  REACT_APP_FIREBASE_DATABASE,
  REACT_APP_FIREBASE_PROJECT_ID,
  REACT_APP_FIREBASE_STORAGE_BUCKET,
  REACT_APP_FIREBASE_SENDER_ID,
  REACT_APP_FIREBASE_APP_ID,
  REACT_APP_FIREBASE_MEASUREMENT_ID,
} = process.env;

const firebaseConfig = {
  apiKey: REACT_APP_FIREBASE_APIKEY,
  authDomain: REACT_APP_FIREBASE_DOMAIN,
  databaseURL: REACT_APP_FIREBASE_DATABASE,
  projectId: REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: REACT_APP_FIREBASE_SENDER_ID,
  appId: REACT_APP_FIREBASE_APP_ID,
  measurementId: REACT_APP_FIREBASE_MEASUREMENT_ID
};

これでエラーが解消できたようです。
誰かのお役に立てることを祈っております。

DefinePluginを使って設定する

Discussion