cross-envで指定した環境変数がコード上でundefinedになるのをなんとかする

JavaScript React

開発用と本番用で表示する View を切り替えたいときに環境変数を使うことがあります。

以下は yarn + webpack + React で環境構築して、環境変数をコードから参照して表示するViewを切り替えている例です。

import React from "react";

function App() {
  return (
    <>
      {process.env.PUBLIC_URL === "/dev" ? (
        <h1>Development</h1>
      ) : (
        <h1>Production</h1>
      )}
    </>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

...
"scripts": {
  "start": "cross-env PUBLIC_URL=/dev webpack-dev-server --hot --config webpack.js"
},
...

yarn run start を実行した時、環境変数 PUBLIC_URL に "/dev" が指定されているため、「Development」が画面に表示されるはずです。しかし、実際に動かしてみると process.env.PUBLIC_URL は undefined で「Production」が表示されます。

issue を確認してみたところ、 Webpack DefinePlugin を使うとよさそうだったので利用してみます。

github.com

const webpack = require('webpack');
...
new webpack.DefinePlugin({
  'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL),
}),
...

これで App.js から環境変数を参照することができるようになりました。「Development」が画面に表示されるようになります。

参考