Docs: Clarify webpack process.env requires variables to be set

[nitzan-treg]

hey, saw #32322 and took a look

added a warning callout to the angular/ember section of the env vars docs explaining that webpack 5 only injects process.env when the variable is actually defined at build time -- if it's not set, you get a "can't find variable: process" runtime error. also added a troubleshooting entry for that specific error with steps to fix it

fixes #32322

---

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Documentation
  • Clarified environment variable configuration requirements and best practices
  • Added a Webpack-specific warning about runtime missing process and guidance to define STORYBOOK_* variables at build time
  • Added a troubleshooting subsection with a remediation checklist and contrast between Webpack and Vite behaviors
  • Minor typographic fixes in the introductory text

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7e49d92a-a5a1-47aa-9a11-25fb0d6c5c97

📥 Commits

Reviewing files that changed from the base of the PR and between 36dcd51 and 006e099.

📒 Files selected for processing (1)

• docs/configure/environment-variables.mdx

🚧 Files skipped from review as they are similar to previous changes (1)

• docs/configure/environment-variables.mdx

---

📝 Walkthrough

Walkthrough

Updated documentation to clarify Webpack 5's process.env injection: only STORYBOOK_* variables defined at build time are injected into the browser bundle; added a Webpack-specific warning callout and a troubleshooting subsection for "Can't find variable: process" with remediation steps.

Changes

Cohort / File(s)	Summary
Documentation – Environment Variables docs/configure/environment-variables.mdx	Adjusted intro typography; added a Webpack 5-specific warning callout explaining that only build-time STORYBOOK_* vars are injected and that missing process can cause a runtime Can't find variable: process error; added a Troubleshooting subsection with mitigation steps (use .env, CLI, or env defaults in .storybook/main.ts).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• CLI: Set STORYBOOK environment variable #33938: Documents/runtime/boot-time handling of process.env.STORYBOOK and relates to the documented injection behavior.
• Core: Fix .env-file parsing #33383: Changes builder-webpack5's DefinePlugin/env parsing to inject process.env into the preview bundle, directly addressing the scenario described in the new docs.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/configure/environment-variables.mdx`:
- Line 15: Replace the typographic “smart” quotes used in JSX attributes with
ASCII double quotes in the Callout JSX (and any similar JSX tags) so MDX can
parse correctly; specifically update the Callout element attributes
variant=”info” and icon=”💡” (and the other occurrences on the same file at the
noted locations) to use plain " characters for variant and icon values in
docs/configure/environment-variables.mdx.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0fc695db-5a0b-4de6-b247-502d30a2c1ea

📥 Commits

Reviewing files that changed from the base of the PR and between a79f398 and 36dcd51.

📒 Files selected for processing (1)

• docs/configure/environment-variables.mdx

[github-actions]

	Fails
🚫	The "#### Manual testing" section must be filled in. Please describe how to test the changes you've made, step by step, so that reviewers can confirm your PR works as intended.

Generated by 🚫 dangerJS against 006e099