[Bug]: Unable to access env vars in preview.tsx or in Story

[angelod1as]

Describe the bug

For technical reasons, I need to pass some environment variables to a Provider, configured in preview.tsx decorators.

// preview.tsx

export const decorators: Decorator[] = [
  (Story, context) => {
    useTheme({ themeOverride: context.globals.theme })
    const environmentVariables = process.env

    return (
      <div>
        <Providers
          environmentVariables={environmentVariables}
        >
          <Fonts />
          <div>
            <Story />
          </div>
        </Providers>
      </div>
    )
  },
]

But, if I add a console.log(process.env), an empty object appears. The same happens if I console.log it inside any Story. In the main.ts file, consoling config gives me the right vars.

What am I doing wrong?

To Reproduce

Repro.

1. added a .env file with two vars, one with STORYBOOK_ prefix, the other without.
2. renamed the preview.ts to preview.tsx and imported React
3. I added the following decorator:

   decorators: [
     (Story) => {
       console.log(process.env); // returns { }
       return (
         <div>
           <Story />
         </div>
       );
     },
   ],

4. In main.ts, I added:

    env: (config) => {
      console.log(config); // returns { TEST:"test", STORYBOOK_TEST: "storybook test" }
      return { ...config };
    },

5. In Button.stories.ts, I added a console.log(process.env) that returns { }

(I tested in Stackblitz and in a local repro)

System

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.17.0 - ~/.cache/fnm_multishells/94920_1696933691864/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - ~/.cache/fnm_multishells/94920_1696933691864/bin/npm
  Browsers:
    Chrome: 117.0.5938.149
    Safari: 17.0
  npmPackages:
    @storybook/addon-essentials: ^7.5.0-alpha.5 => 7.5.0-alpha.5
    @storybook/addon-interactions: ^7.5.0-alpha.5 => 7.5.0-alpha.5
    @storybook/addon-links: ^7.5.0-alpha.5 => 7.5.0-alpha.5
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8
    @storybook/blocks: ^7.5.0-alpha.5 => 7.5.0-alpha.5
    @storybook/nextjs: ^7.5.0-alpha.5 => 7.5.0-alpha.5
    @storybook/react: ^7.5.0-alpha.5 => 7.5.0-alpha.5
    @storybook/testing-library: ^0.2.2 => 0.2.2

Additional context

No response

[shilman]

Looks like this might be a bug with @storybook/nextjs's handling of environment vars

[valentinpalkovic]

The problem is pretty well explained in #15925.

The issue is that the internal DefinePlugin in Webpack only replaces process.env.<KEY> by its corresponding value and leaves process.env untouched. This is for security reasons, and second, we will try to reduce the bloat in the output.

What you can do now and try is to adjust your code a little bit so that the const environmentVariables lists all keys individually:

export const decorators: Decorator[] = [
  (Story, context) => {
    useTheme({ themeOverride: context.globals.theme })
    const environmentVariables = {
      key1: process.env.key1,
      key2: process.env.key2,
      ...
    }

    return (
      <div>
        <Providers
          environmentVariables={environmentVariables}
        >
          <Fonts />
          <div>
            <Story />
          </div>
        </Providers>
      </div>
    )
  },
]

Then, theoretically, things should work.
Please let me know whether the workaround helps.