Builder-Vite: Use relative path for mocker entry in production builds by DukeDeSouth · Pull Request #33792 · storybookjs/storybook

DukeDeSouth · 2026-02-07T03:01:29Z

Human View

What I did

Fixed the vite-inject-mocker plugin to use a relative path (./vite-inject-mocker-entry.js) instead of an absolute path (/vite-inject-mocker-entry.js) when injecting the mocker runtime <script> tag during production builds.

Why

When Storybook artifacts are hosted under a non-root base path (e.g. GitHub Pages at https://user.github.io/my-repo/), the browser resolves the absolute path against the host root, causing a 404:

# Absolute path (broken on non-root hosting):
GET https://user.github.io/vite-inject-mocker-entry.js  →  404

# Relative path (works everywhere):
GET https://user.github.io/my-repo/vite-inject-mocker-entry.js  →  200

This is consistent with other assets in iframe.html which already use relative paths (e.g. ./sb-common-assets/nunito-sans-regular.woff2).

How

The transformIndexHtml hook now checks viteConfig.command:

build → uses ./vite-inject-mocker-entry.js (relative, works at any base path)
serve → keeps /vite-inject-mocker-entry.js (absolute, required for Vite dev-server resolveId matching)

The emitted chunk (fileName: 'vite-inject-mocker-entry.js') is placed at the same directory level as iframe.html, so the relative path resolves correctly.

Testing

Added 6 unit tests covering:

Relative path in build mode
Absolute path in dev mode
Script injection position (right after <head>)
<head> with attributes
Missing <head> tag (graceful no-op)
HTML preservation (no unintended mutations)

All 6 new tests pass. All pre-existing tests in builder-vite remain green.

Checklist

Bug fix (non-breaking change which fixes an issue)
Unit tests added
Verified existing tests pass

Closes #32428

AI View (DCCE Protocol v1.0)

Metadata

Generator: Claude (Anthropic) via Cursor IDE
Methodology: AI-assisted development with human oversight and review

AI Contribution Summary

Solution design and implementation
Test development (6 new test cases)

Verification Steps Performed

Reproduced the reported issue
Analyzed source code to identify root cause
Implemented and tested the fix

Human Review Guidance

Core changes are in: ./vite-inject-mocker-entry.js, /vite-inject-mocker-entry.js, iframe.html
Review the breaking change implications

Made with M7 Cursor

Summary by CodeRabbit

Tests
- Added unit tests for the inject script behavior covering build and serve modes: placement immediately after , handling of head attributes, no-op when no , and preservation of the rest of the HTML.
Bug Fixes
- Fixed script path handling so production builds use relative paths and development uses absolute paths for correct loading across deployment scenarios.

…uilds The vite-inject-mocker plugin injects a `<script>` tag with an absolute path (`/vite-inject-mocker-entry.js`) into the HTML. When the built Storybook is hosted under a non-root base path (e.g. GitHub Pages at `/my-repo/`), the browser resolves the absolute URL against the host root, resulting in a 404. The fix switches to a relative path (`./vite-inject-mocker-entry.js`) during production builds while keeping the absolute path in dev mode (where Vite's dev-server needs it for `resolveId` matching). This is consistent with other assets in `iframe.html` which already use relative paths (e.g. `./sb-common-assets/…`). Fixes storybookjs#32428 Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai · 2026-02-07T03:04:09Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Plugin behavior changed to inject a relative script path for production builds and an absolute path for development; tests added to validate transformIndexHtml injection, path selection, placement, and edge cases.

Changes

Cohort / File(s)	Summary
Plugin Tests `code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.test.ts`	Adds unit tests for `transformIndexHtml`: asserts relative (`./vite-inject-mocker-entry.js`) in build, absolute (`/vite-inject-mocker-entry.js`) in serve, injection immediately after `<head>` (including with attributes), returns `undefined` when no `<head>`, and preserves remaining HTML. Mocks `node:url` and `import.meta.resolve`.
Plugin Implementation `code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts`	Adjusts `transformIndexHtml` to compute injected script `src` as relative (`./...`) in production builds and absolute (`/...`) in dev; updates entry code to reference computed `src`.

Sequence Diagram(s)

sequenceDiagram
  participant Vite as Vite (build/serve)
  participant Plugin as vite-inject-mocker plugin
  participant HTML as index.html

  Vite->>Plugin: configResolved({ command: "build" | "serve" })
  Vite->>Plugin: transformIndexHtml(html)
  Plugin->>Plugin: compute entrySrc (./entry.js if build, /entry.js if serve)
  Plugin->>HTML: inject <script src="entrySrc"> immediately after <head>
  Plugin-->>Vite: return transformed HTML

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Builder-Vite: Use relative path for mocker entry in production builds #33792 — Changes the same plugin and transformIndexHtml behavior to prefer relative entry paths in build and includes related tests.
Builder-Webpack5: Fix @vitest/mocker resolution issue #33315 — Adjusts ENTRY_PATH resolution and transformIndexHtml injection logic in the same plugin.
Mocking: Fix sb.mock usage in Storybook's deployed in subpaths #32678 — Switches injected entry script to relative paths for production deployments in the same plugin.

✨ Finishing touches

📝 Generate docstrings

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

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

…ative-path Builder-Vite: Use relative path for mocker entry in production builds (cherry picked from commit 3c49657)

valentinpalkovic changed the title ~~fix(builder-vite): use relative path for mocker entry in production builds~~ Builder-Vite: Use relative path for mocker entry in production builds Feb 9, 2026

valentinpalkovic self-assigned this Feb 9, 2026

valentinpalkovic added addon: vitest test utilities bug ci:normal and removed addon: vitest labels Feb 9, 2026

valentinpalkovic added this to Core Team Projects Feb 9, 2026

valentinpalkovic moved this to In Progress in Core Team Projects Feb 9, 2026

valentinpalkovic approved these changes Feb 9, 2026

View reviewed changes

Linting

e9d37ae

valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Feb 9, 2026

valentinpalkovic merged commit 3c49657 into storybookjs:next Feb 9, 2026
3 of 5 checks passed

github-project-automation Bot moved this from In Progress to Done in Core Team Projects Feb 9, 2026

This was referenced Feb 9, 2026

Release: Patch 10.2.8 #33811

Closed

Release: Prerelease 10.3.0-alpha.5 #33812

Merged

Release: Prerelease 10.3.0-alpha.5 #33823

Merged

Release: Patch 10.2.9 #33824

Merged

valentinpalkovic added a commit that referenced this pull request Feb 17, 2026

Merge pull request #33792 from DukeDeSouth/fix/vite-inject-mocker-rel…

46e5dc7

…ative-path Builder-Vite: Use relative path for mocker entry in production builds (cherry picked from commit 3c49657)

github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Feb 17, 2026

dosubot Bot mentioned this pull request Mar 9, 2026

[Bug]: Angular 21 + Storybook 10 breaks .mdx stories #34084

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Builder-Vite: Use relative path for mocker entry in production builds#33792

Builder-Vite: Use relative path for mocker entry in production builds#33792
valentinpalkovic merged 2 commits into
storybookjs:nextfrom
DukeDeSouth:fix/vite-inject-mocker-relative-path

DukeDeSouth commented Feb 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Feb 7, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

DukeDeSouth commented Feb 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Human View

What I did

Why

How

Testing

Checklist

AI View (DCCE Protocol v1.0)

Metadata

AI Contribution Summary

Verification Steps Performed

Human Review Guidance

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DukeDeSouth commented Feb 7, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 7, 2026 •

edited

Loading