Webpack: Gate lazy-compilation import pipeline on webpack version

[Copilot]

Closes #32302

Manual testing

Run/Build webpack project with lazy compilation on

---

Webpack has fixed the lazy-compilation invalidation bug that originally required Storybook's import serialization workaround. This PR removes that workaround for webpack >= 5.101.3, while keeping it as a fallback for older webpack 5 installations where the bug is still present.

• Version-gated pipeline

  • importPipeline is retained in code/lib/core-webpack/src/importPipeline.ts as a fallback.
  • toImportFn accepts a needPipelinedImport option to conditionally embed the pipeline into the generated virtual module.
  • builder-webpack5 reads webpackModule.version at build time and enables the pipeline only when lazy compilation is active, not in production, and the effective webpack version is below 5.101.3.
  • Version comparison uses semver.lt() with semver.coerce() to safely handle prerelease version strings (e.g., 5.101.3-alpha.1).
  • Added semver as a dependency to builder-webpack5 package.
  • Conservative fallback: When webpack version cannot be parsed, the pipeline is disabled rather than enabled, since the bug is fixed in newer versions and we prefer to avoid unnecessary performance overhead.

• Simplified import path for modern webpack

  • Projects running webpack >= 5.101.3 use direct dynamic imports with no pipeline overhead.

• Test coverage

  • Restored comprehensive tests in importPipeline.test.ts to verify the pipeline serialization behavior remains correct for older webpack versions.
  • Added comprehensive tests in to-importFn.test.ts to verify the generated importFn code behavior for both pipeline and direct import modes.

// webpack >= 5.101.3 (pipeline not needed)
const moduleExports = await importers[i](path);

// webpack < 5.101.3 (pipeline retained as fallback)
const moduleExports = await pipeline(() => importers[i](path));

Summary by CodeRabbit

• Bug Fixes
  • Improved Webpack 5 compatibility for lazy compilation by gating pipelined imports based on runtime Webpack version and build mode.
• Tests
  • Restored original importPipeline.test.ts tests with improved type safety to verify serialization behavior for older webpack versions.
  • Added new test coverage in to-importFn.test.ts that verifies generated import behavior and whether a pipelined import implementation is emitted.

Summary by CodeRabbit

• Bug Fixes

  • Improved webpack version detection and conditional handling to ensure correct import behavior across webpack 5.x variants.

• Tests

  • Added tests validating generated import code and pipeline behavior across different configuration scenarios; improved test helpers for more robust gating.

• Chores

  • Added a runtime dependency to support accurate version checks.

[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

Walkthrough

This PR enables the pipelined-import workaround only when lazy compilation is enabled, the build is not production, and the runtime webpack version is older than 5.101.3 (checked via semver). Tests verify toImportFn output with and without the pipeline implementation.

Changes

Webpack pipelined-import version gating and tests

Layer / File(s)	Summary
Add webpack version detection infrastructure code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts, code/builders/builder-webpack5/package.json	New semver and webpack imports enable runtime webpack version detection. semver dependency (^7.7.3) is added to the builder package dependencies.
Gate pipelined import on webpack version code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts	needPipelinedImport is now computed true only when lazyCompilation is enabled, config is not production, and the detected webpack version is older than 5.101.3 (checked via semver.coerce and semver.lt).
Validate generated import code based on needPipelinedImport code/lib/core-webpack/src/to-importFn.test.ts, code/lib/core-webpack/src/importPipeline.test.ts	New test suite imports toImportFn and asserts generated code uses an identity pipeline when needPipelinedImport is false/omitted and includes importPipeline implementation when true; test helper createGate was typed generically to support pipeline tests.

🎯 3 (Moderate) | ⏱️ ~20 minutes

---

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

[Sidnioulz]

Code LGTM. Let's see what CI says.

[Copilot]

Pull request overview

This PR removes the webpack lazy-compilation import serialization workaround now that the upstream webpack invalidation issue is described as fixed, simplifying Storybook’s generated webpack story import function.

Changes:

• Removed importPipeline and its dedicated tests.
• Simplified toImportFn to directly await generated importers.
• Removed lazy-compilation pipeline option threading from webpack5 virtual module generation.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
code/lib/core-webpack/src/to-importFn.ts	Simplifies generated story import function to call importers directly.
code/lib/core-webpack/src/importPipeline.ts	Deletes the previous serialization helper.
code/lib/core-webpack/src/importPipeline.test.ts	Deletes tests for the removed helper.
code/lib/core-webpack/src/index.ts	Stops exposing the removed pipeline helper through the package barrel.
code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts	Removes builder option lookup and pipeline flag passing for generated story modules.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[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/virtual-module-mapping.ts`:
- Around line 24-35: The isWebpackVersionAtLeast function currently uses
parseInt without handling NaN; update the parsing so each parts[i] and min[i] is
coerced to a numeric value (e.g., const p = Number.isNaN(parsed) ? 0 : parsed)
before comparison to avoid NaN causing incorrect true results, and adjust the
comment above the parsing to accurately state that parseInt stops at non-numeric
characters and we coerce non-numeric parts to 0; reference the function
isWebpackVersionAtLeast and the variables parts, min, and parseInt when making
the change.

🪄 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: 737366e3-f3ca-45ca-8ae1-f16e2657da87

📥 Commits

Reviewing files that changed from the base of the PR and between 5d3d954 and a549e3d.

📒 Files selected for processing (1)

• code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts

[storybook-app-bot]

Package Benchmarks

^{Commit: 5737967, ran on 8 June 2026 at 09:41:33 UTC}

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

storybook

	Before	After	Difference
Dependency count	72	74	🚨 +2 🚨
Self size	20.73 MB	20.43 MB	🎉 -308 KB 🎉
Dependency size	36.11 MB	36.65 MB	🚨 +539 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	188	189	🚨 +1 🚨
Self size	15 KB	15 KB	🎉 -18 B 🎉
Dependency size	30.67 MB	30.77 MB	🚨 +101 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	203	205	🚨 +2 🚨
Self size	908 KB	908 KB	🎉 -144 B 🎉
Dependency size	88.98 MB	89.21 MB	🚨 +231 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	196	198	🚨 +2 🚨
Self size	32 KB	32 KB	🎉 -36 B 🎉
Dependency size	87.47 MB	87.70 MB	🚨 +231 KB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	73	75	🚨 +2 🚨
Self size	1.08 MB	1.08 MB	🚨 +66 B 🚨
Dependency size	56.84 MB	57.08 MB	🚨 +231 KB 🚨
Bundle Size Analyzer	node	node

I am Sidnioulz