[Bug]: `process.env` is undefined (8.1.7)

[Vicky Koblinski]

Describe the bug

I migrated our app from 7.x.x to 8.1.7 but now many stories are breaking because process.env is undefined in the components. Cannot read properties of undefined (reading 'API_ENDPOINT')

This project doesn't have an .env file or pass in any environment variables to Storybook.

Expected result:
process.env should be {} and not undefined

Note: This only happens on the built version of storybook, in dev mode process.env is {}

I was able to fix this by adding in a dummy environment variable to the main.ts config

const config: StorybookConfig = {
  ...
  env: config => ({
    ...config,
    DUMMY: 'I exist so process.env is not undefined',
  }),
};

Reproduction link

No link

Reproduction steps

1. Init storybook
2. Create a button component that accesses process.env, such as process.env.COLOR
3. Create story to render component
4. Run storybook - npm run storybook - notice that the story renders
5. Build storybook and host it, access the story - notice that the story errors

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.22 - ~/projects/e4s-web-client3/e4s-web-client/node_modules/.bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: 8.1.7 => 8.1.7 
    @storybook/addon-coverage: 1.0.4 => 1.0.4 
    @storybook/addon-designs: 8.0.2 => 8.0.2 
    @storybook/addon-essentials: 8.1.7 => 8.1.7 
    @storybook/addon-interactions: 8.1.7 => 8.1.7 
    @storybook/addon-links: 8.1.7 => 8.1.7 
    @storybook/addon-mdx-gfm: 8.1.7 => 8.1.7 
    @storybook/blocks: 8.1.7 => 8.1.7 
    @storybook/nextjs: 8.1.7 => 8.1.7 
    @storybook/preview-api: 8.1.7 => 8.1.7 
    @storybook/react: 8.1.7 => 8.1.7 
    @storybook/test: 8.1.7 => 8.1.7 
    @storybook/test-runner: 0.18.2 => 0.18.2 
    chromatic: 6.18.0 => 6.18.0 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    storybook: 8.1.7 => 8.1.7 
    storybook-addon-apollo-client: 7.3.0 => 7.3.0

Additional context

No response

[Weyert de Boer]

Yes, I appear to have the same problem when I try to use a dependency that uses process.env. For example, when a dependency uses the util-package then it complains about https://github.com/browserify/node-util/blob/master/util.js#L109

When you have vite.config.ts-file like below it still fails, feels like it doesn't get used by Storybook v8:

/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  define: {
    "process.env": process.env,
  },
  plugins: [react()],
  css: { postcss: { plugins: [] } },
  test: {
    environment: "jsdom",
    setupFiles: ["setupTests.ts"],
    restoreMocks: true,
    coverage: {
      provider: "v8",
      all: true,
    },
  },
});