process.env is empty since 6.4.10

Describe the bug At runtime, inside of a story, we need access to a (subset of) process.env to pass some values from the buildserver onto Storybook, and ultimately the application proper.

In Storybook 6.4.9 this worked fine. In Storybook 6.4.10 this got broken. process.env is now { }. In Storybook 6.4.14 this is not fixed, unfortunately.

Neither env variables from the CLI are passed, nor variables from .env. We use both, and neither end up in process.env.

Is it possible that #17174 broke this? That one is the only fix that remotely seems to have anything to do with process.env, assuming the changelog is complete.

To Reproduce I’m not sure what has been done to get this to work in the first place, or whether this is standard functionality. I do see dotenv being exported from paths.js, but it’s really difficult to dig into Storybook to see what it’s doing with that, if anything.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.62)
  npmPackages:
    @storybook/addon-a11y: 6.4.10 => 6.4.10
    @storybook/addon-actions: 6.4.10 => 6.4.10
    @storybook/addon-controls: 6.4.10 => 6.4.10
    @storybook/addon-docs: 6.4.10 => 6.4.10
    @storybook/addons: 6.4.10 => 6.4.10
    @storybook/preset-create-react-app: 3.2.0 => 3.2.0
    @storybook/react: 6.4.10 => 6.4.10
    @storybook/theming: 6.4.10 => 6.4.10

[thany]

As a temporary workaround, we can use this in the main.js:

module.exports = {
  webpackFinal: async config => {
    const definePlugin = config.plugins.find(
      ({ constructor }) => constructor && constructor.name === 'DefinePlugin',
    );
    if (definePlugin) {
      definePlugin.definitions = injectEnv(definePlugin.definitions);
    }

    return config;
  },
};

Where injectEnv() looks like this:

function injectEnv(definitions) {
  const env = 'process.env';

  if (!definitions[env]) {
    return {
      ...definitions,
      [env]: JSON.stringify(
        Object.fromEntries(
          Object.entries(definitions)
            .filter(([key]) => key.startsWith(env))
            .map(([key, value]) => [key.substring(env.length + 1), JSON.parse(value)]),
        ),
      ),
    };
  }
  return definitions;
}

Honestly though, I believe #17174 should be reverted, because this is quite a convoluted workaround to something that didn’t need to be broken in the first place. I’m sure it wasn’t intentionally broken, but it sure is a regression, iyam.

[MagnusHJensen]

What is the status on this issue? Makes Storybook unusable, if you want some of the newer features.