Webpack: Prevent long preview output filenames

[zhangli091011]

Closes #30221

Claim: #30221 (comment)

What I did

• Replaced the webpack5 preview output [name] templates with a filename function that preserves normal readable names.
• Bounded long entry and async chunk filename components to 200 bytes, using a sanitized prefix and deterministic 64-bit SHA-256 suffix to avoid collisions.
• Preserved production [contenthash:8] behavior and applied the same strategy in development.
• Added focused helper tests and real in-memory webpack compilations covering development and production entry/chunk output.

AI disclosure: GPT-5.6 via OpenCode assisted with implementation and validation. I reviewed the code, tests, and PR content.

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

1. Create a webpack5 Storybook whose stories are under a deeply nested path long enough to previously produce ENAMETOOLONG.
2. Run the Storybook development server and confirm the preview compiles without ENAMETOOLONG.
3. Run a static Storybook build and confirm it succeeds.
4. Inspect the output and confirm normal chunk names remain readable, while long entry and async chunk filename components are at most 200 bytes and production files retain an 8-character content hash.

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

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• 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 do not 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

• Bug Fixes
  • Improved preview iframe chunk filename generation for more consistent, readable output in development and the expected placeholder behavior in production.
  • Ensures filenames are filesystem-safe, deterministic, and unique for edge-case or very long chunk names, with a strict byte-size limit.
• Tests
  • Added unit and in-memory integration-style coverage for preview filename generation, sanitization, hashing/uniqueness, and emitted asset naming.
• Chores
  • Added memfs to the test setup for the preview filename environment.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Webpack preview chunk filenames now use a helper that derives readable names, sanitizes and bounds long names, and adds deterministic hashes. Webpack applies it to chunkFilename, with unit and in-memory build tests covering production and development outputs.

Changes

Preview filename generation

Layer / File(s)	Summary
Filename generation helper code/builders/builder-webpack5/src/preview/preview-filename.ts	createPreviewFilename derives chunk names, enforces a 200-byte limit, sanitizes long names, preserves production content-hash placeholders, and adds deterministic hash suffixes.
Webpack output integration code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts, code/builders/builder-webpack5/package.json	Webpack uses the helper for chunk filenames, and memfs is added as a development dependency for in-memory build tests.
Filename tests and build fixtures code/builders/builder-webpack5/src/preview/preview-filename.test.ts	Tests cover fallback names, readable short names, long-name hashing, byte limits, production placeholders, uniqueness, and emitted development and production assets.

Estimated code review effort: 3 (Moderate) | ~20 minutes

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Fix failing CI checks

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/builders/builder-webpack5/src/preview/preview-filename.ts`:
- Around line 27-48: Update createPreviewFilename so an empty chunk.name does
not bypass the fallback identifier: treat an empty name as missing and fall back
to chunk.id or 'chunk' before sanitization and filename generation. Preserve the
existing behavior for non-empty names and other falsy-safe cases.

🪄 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: 6129c4b8-4408-48e8-ae92-27f9feb72ab4

📥 Commits

Reviewing files that changed from the base of the PR and between 7b2b288 and 07b4027.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

• code/builders/builder-webpack5/package.json
• code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
• code/builders/builder-webpack5/src/preview/preview-filename.test.ts
• code/builders/builder-webpack5/src/preview/preview-filename.ts

[zhangli091011]

When convenient, could a maintainer please apply the appropriate labels? bug, ci:normal, and qa:needed seem suitable for this webpack output fix, though please use the QA label that best matches the project workflow. Contributor permissions do not allow me to add them.

[ndelangen]

@zhangli091011 Thank you so much for this PR!

Could we make this fix only apply to overlong async chunk filenames? The current implementation also changes normal filenames and short path-like chunk names, which seems broader than the reported bug.

[zhangli091011]

Updated in daa0ca3e11f to narrow the change as requested. The original output.filename templates are restored, short async chunk names (including path-like names) are returned unchanged, and only async chunk filenames over the 200-byte threshold are sanitized, truncated, and given a deterministic hash. I also adjusted the in-memory webpack tests to verify normal entry filenames remain unchanged in development and production while long async chunks are bounded. Validation passed: 10 focused tests, yarn nx check builder-webpack5, formatting, and focused lint.

[zhangli091011]

The branch is now updated to the latest next (3d78a5e7cac). The narrowed implementation remains conflict-free, but CircleCI is still skipped because the required change, CI, and QA labels are unavailable to contributors. Could a maintainer please apply the appropriate labels (for example bug, ci:normal, and the suitable qa:* label) and re-review the scoped fix?

[zhangli091011]

Merged the latest next in 06c88f968a0 and resolved the lockfile conflict without widening the fix: normal output filenames and short/path-like async chunk names remain unchanged, only overlong async chunk filenames are bounded, and empty names still fall back correctly. Validation passed: all 23 builder-webpack5 tests (including in-memory development/production webpack builds), yarn nx check builder-webpack5, formatting, and focused lint (0 errors). Could a maintainer please add the required ci:* and qa:* labels and re-review?

[storybook-app-bot]

Package Benchmarks

^{Commit: a701f45, ran on 18 August 2026 at 07:19:10 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/addon-mcp

	Before	After	Difference
Dependency count	11	13	🚨 +2 🚨
Self size	106 KB	191 KB	🚨 +85 KB 🚨
Dependency size	2.74 MB	2.89 MB	🚨 +145 KB 🚨
Bundle Size Analyzer	Link	Link

storybook-addon-pseudo-states

	Before	After	Difference
Dependency count	0	0	0
Self size	24 KB	21 KB	🎉 -3 KB 🎉
Dependency size	689 B	689 B	0 B
Bundle Size Analyzer	Link	Link

@storybook/addon-vitest

	Before	After	Difference
Dependency count	2	2	0
Self size	467 KB	429 KB	🎉 -37 KB 🎉
Dependency size	350 KB	350 KB	0 B
Bundle Size Analyzer	Link	Link

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	186	186	0
Self size	92 KB	81 KB	🎉 -11 KB 🎉
Dependency size	35.81 MB	35.81 MB	🚨 +108 B 🚨
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	73	73	0
Self size	21.85 MB	21.49 MB	🎉 -357 KB 🎉
Dependency size	30.98 MB	30.98 MB	🚨 +692 B 🚨
Bundle Size Analyzer	Link	Link

@storybook/angular

	Before	After	Difference
Dependency count	185	185	0
Self size	266 KB	255 KB	🎉 -11 KB 🎉
Dependency size	30.19 MB	30.18 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/angular-vite

	Before	After	Difference
Dependency count	20	20	0
Self size	23.12 MB	23.06 MB	🎉 -52 KB 🎉
Dependency size	11.49 MB	11.49 MB	🎉 -927 B 🎉
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	185	185	0
Self size	13 KB	13 KB	0 B
Dependency size	31.17 MB	31.16 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	540	531	🎉 -9 🎉
Self size	641 KB	641 KB	🎉 -149 B 🎉
Dependency size	63.07 MB	62.50 MB	🎉 -576 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	101	90	🎉 -11 🎉
Self size	1.42 MB	1.42 MB	🎉 -971 B 🎉
Dependency size	23.31 MB	23.10 MB	🎉 -202 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	122	122	0
Self size	29 KB	29 KB	🚨 +18 B 🚨
Dependency size	25.66 MB	25.65 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	79	79	0
Self size	32 KB	32 KB	0 B
Dependency size	20.42 MB	20.41 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	272	272	0
Self size	23 KB	23 KB	0 B
Dependency size	48.26 MB	48.24 MB	🎉 -23 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	198	198	0
Self size	15 KB	15 KB	0 B
Dependency size	37.09 MB	37.08 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/tanstack-react

	Before	After	Difference
Dependency count	80	80	0
Self size	132 KB	118 KB	🎉 -14 KB 🎉
Dependency size	20.46 MB	20.45 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	94	94	0
Self size	31 KB	31 KB	🚨 +783 B 🚨
Dependency size	18.48 MB	18.44 MB	🎉 -41 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	205	205	0
Self size	852 KB	833 KB	🎉 -19 KB 🎉
Dependency size	86.49 MB	86.12 MB	🎉 -367 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	198	198	0
Self size	44 KB	32 KB	🎉 -12 KB 🎉
Dependency size	84.96 MB	84.60 MB	🎉 -356 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	74	74	0
Self size	1.09 MB	1.09 MB	🚨 +1 KB 🚨
Dependency size	52.83 MB	52.48 MB	🎉 -357 KB 🎉
Bundle Size Analyzer	node	node

@storybook/mcp

	Before	After	Difference
Dependency count	11	11	0
Self size	147 KB	107 KB	🎉 -39 KB 🎉
Dependency size	2.74 MB	2.74 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/react

	Before	After	Difference
Dependency count	59	59	0
Self size	1.46 MB	1.45 MB	🎉 -12 KB 🎉
Dependency size	12.27 MB	12.27 MB	🚨 +106 B 🚨
Bundle Size Analyzer	Link	Link

@storybook/vue3

	Before	After	Difference
Dependency count	90	90	0
Self size	142 KB	102 KB	🎉 -40 KB 🎉
Dependency size	18.10 MB	18.10 MB	🎉 -40 B 🎉
Bundle Size Analyzer	Link	Link