storybook icon indicating copy to clipboard operation
storybook copied to clipboard

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

Open VickyKoblinski opened this issue 8 months ago • 1 comments

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

VickyKoblinski avatar Jun 13 '24 01:06 VickyKoblinski