storybookjs/storybook

[BUG] NextJS addon does not get environment variables by default

Open

#26,215 opened on Feb 27, 2024

View on GitHub
 (21 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantednextjssev:S3

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 9d 3h) (173 merged PRs in 30d)

Description

Describe the bug

We use the environment variables to set up among others, API url, base url, etc. But when launching the storybook it is unable to find the setup environment variables!

To Reproduce

Just setup and NextJS project with storybook, define any page or function to use with environment variables, create its story and run it.

System

Storybook Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.4 - /usr/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: 7.6.17 => 7.6.17 
    @storybook/addon-essentials: 7.6.17 => 7.6.17 
    @storybook/addon-interactions: 7.6.17 => 7.6.17 
    @storybook/addon-links: 7.6.17 => 7.6.17 
    @storybook/addon-onboarding: 1.0.11 => 1.0.11 
    @storybook/addon-storysource: 7.6.17 => 7.6.17 
    @storybook/addon-themes: 7.6.17 => 7.6.17 
    @storybook/blocks: 7.6.17 => 7.6.17 
    @storybook/nextjs: 7.6.17 => 7.6.17 
    @storybook/react: 7.6.17 => 7.6.17 
    @storybook/test: 8.0.0-alpha.16 => 8.0.0-alpha.16 
    @storybook/theming: 7.6.17 => 7.6.17 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: 7.6.17 => 7.6.17 
    storybook-addon-pseudo-states: 2.1.2 => 2.1.2 
    storybook-addon-rtl: 1.0.0 => 1.0.0

Additional context

We are using Storybook as a workaround to test the pages with MSW, using the respective addon.

It could be fixed by applying this on the addon.

Contributor guide

Research direction
Investigate the NextJS addon's configuration files, particularly how it loads environment variables. Look at the workaround suggested in the issue (https://www.rmkennedy.com/posts/storybook env vars) to understand the required changes. The fix may involve ensuring that environment variables are passed through to the Storybook build process. Review the addon's source code in `code/addons/nextjs` and the main Storybook configuration loading, and check the 21 comments for additional insights.
Tech stack
typescriptreactnextjsnodejs
Domain
frontenddeveloper experience
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Storybook addon basicsNode.js environment variablesNext.js configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60