Storybook + CRA dotenv

webpack.config.js

// .storybook/webpack.config.js
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');

const dotenv = path.resolve(__dirname, '../.env');
const NODE_ENV = process.env.NODE_ENV || 'development';

const dotenvFiles = [
  `${dotenv}.${NODE_ENV}.local`,
  `${dotenv}.${NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone
  NODE_ENV !== 'test' && `${dotenv}.local`,
  dotenv,
].filter(Boolean);

dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv').config({
      path: dotenvFile,
    });
  }
});

const REACT_APP = /^REACT_APP_/i;

const clientEnv = Object.keys(process.env)
  .filter(key => REACT_APP.test(key))
  .reduce(
    (env, key) => {
      env[key] = process.env[key];

      return env;
    },
    { NODE_ENV },
  );

const stringifyEnv = raw =>
  Object.keys(raw).reduce((env, key) => {
    env[key] = JSON.stringify(raw[key]);

    return env;
  }, {});

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': stringifyEnv(clientEnv),
    }),
  ],
};