Skip to content

Core: Fix iframe URL issues and Addons display for /index.html#33624

Closed
ia319 wants to merge 2 commits into
storybookjs:nextfrom
ia319:bug/33548-index-html-direct-access
Closed

Core: Fix iframe URL issues and Addons display for /index.html#33624
ia319 wants to merge 2 commits into
storybookjs:nextfrom
ia319:bug/33548-index-html-direct-access

Conversation

@ia319
Copy link
Copy Markdown
Member

@ia319 ia319 commented Jan 22, 2026

Closes #33548

What I did

  • url.ts: Added normalizeToDirectory to extract directory paths from a pathname. Converts file paths like /index.html to / while keeping directory paths unchanged. Fixes iframe URL concatenation errors.
  • refs.ts: Uses the normalized directory path to determine sourceType, preventing local sources from being misclassified as external.

Another error in the latest code

Phenomenon: When accessing /index.html, the iframe keeps loading indefinitely.

Cause:
getStoryHrefs directly concatenates ${location.pathname}iframe.html. When pathname is /index.html, the generated iframe URL becomes /index.htmliframe.html, causing a 404 error.

Addons not displaying

Phenomenon: Accessing /index.html loads the page normally, but the top toolbar and Addons panel are missing.

Cause:
When accessing /index.html, getSourceType misclassifies it as external (because it compares the full pathname), causing the navigate redirect to be skipped. The URL remains at ?path=/, so Addons do not display due to a viewMode mismatch.

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. Run:
yarn task --task compile
  1. In the sandbox, build and run the sandbox static service:
yarn build-storybook
python3 -m http.server 8000 --directory storybook-static
  1. Access http://localhost:8000/index.html to confirm that the automatic redirect works and Addons are displayed correctly.

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

  • Refactor
    • Enhanced path normalization and improved consistency in source type detection logic.

✏️ Tip: You can customize this high-level summary in your review settings.

ia319 added 2 commits January 22, 2026 21:10
- add normalizeToDirectory to extract directory path from pathname
- apply it to location.pathname when building URL bases
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 22, 2026

📝 Walkthrough

Walkthrough

A new directory path normalization utility function is introduced, and existing path comparison logic is refactored to use directory-based path comparison instead of full URL paths for determining local versus external sources.

Changes

Cohort / File(s) Summary
Path normalization utilities
code/core/src/manager-api/modules/url.ts, code/core/src/manager-api/modules/refs.ts
Introduces normalizeToDirectory() utility function for converting pathnames to directory paths with trailing slashes. Updates getSourceType() in refs.ts to compare normalized directory paths instead of full URLs when detecting local sources. Refactors url.ts to use derived basePath for consistent directory-normalized path handling in origin and manager base calculations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

✨ Finishing touches
  • 📝 Generate docstrings

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

@ia319 ia319 changed the title Bug/33548 index html direct access Core: Fix iframe URL issues and Addons display for /index.html Jan 22, 2026
@ia319
Copy link
Copy Markdown
Member Author

ia319 commented Jan 23, 2026

Why isn't CodeRabbit working on this PR

@storybook-app-bot
Copy link
Copy Markdown

Package Benchmarks

Commit: d9ebb3d, ran on 26 January 2026 at 14:31:24 UTC

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

@storybook/addon-a11y

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 184 KB 🚨 +184 KB 🚨
Dependency size 0 B 2.98 MB 🚨 +2.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-docs

Before After Difference
Dependency count 0 18 🚨 +18 🚨
Self size 0 B 1.64 MB 🚨 +1.64 MB 🚨
Dependency size 0 B 9.25 MB 🚨 +9.25 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-links

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 14 KB 🚨 +14 KB 🚨
Dependency size 0 B 5 KB 🚨 +5 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-onboarding

Before After Difference
Dependency count 0 0 0
Self size 0 B 331 KB 🚨 +331 KB 🚨
Dependency size 0 B 670 B 🚨 +670 B 🚨
Bundle Size Analyzer Link Link

storybook-addon-pseudo-states

Before After Difference
Dependency count 0 0 0
Self size 0 B 21 KB 🚨 +21 KB 🚨
Dependency size 0 B 689 B 🚨 +689 B 🚨
Bundle Size Analyzer Link Link

@storybook/addon-themes

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 28 KB 🚨 +28 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-vitest

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 379 KB 🚨 +379 KB 🚨
Dependency size 0 B 338 KB 🚨 +338 KB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-vite

Before After Difference
Dependency count 0 11 🚨 +11 🚨
Self size 0 B 123 KB 🚨 +123 KB 🚨
Dependency size 0 B 1.30 MB 🚨 +1.30 MB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-webpack5

Before After Difference
Dependency count 0 188 🚨 +188 🚨
Self size 0 B 75 KB 🚨 +75 KB 🚨
Dependency size 0 B 32.04 MB 🚨 +32.04 MB 🚨
Bundle Size Analyzer Link Link

storybook

Before After Difference
Dependency count 0 49 🚨 +49 🚨
Self size 0 B 20.38 MB 🚨 +20.38 MB 🚨
Dependency size 0 B 16.52 MB 🚨 +16.52 MB 🚨
Bundle Size Analyzer Link Link

@storybook/angular

Before After Difference
Dependency count 0 188 🚨 +188 🚨
Self size 0 B 139 KB 🚨 +139 KB 🚨
Dependency size 0 B 30.26 MB 🚨 +30.26 MB 🚨
Bundle Size Analyzer Link Link

@storybook/ember

Before After Difference
Dependency count 0 192 🚨 +192 🚨
Self size 0 B 15 KB 🚨 +15 KB 🚨
Dependency size 0 B 28.76 MB 🚨 +28.76 MB 🚨
Bundle Size Analyzer Link Link

@storybook/html-vite

Before After Difference
Dependency count 0 14 🚨 +14 🚨
Self size 0 B 22 KB 🚨 +22 KB 🚨
Dependency size 0 B 1.46 MB 🚨 +1.46 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs

Before After Difference
Dependency count 0 534 🚨 +534 🚨
Self size 0 B 646 KB 🚨 +646 KB 🚨
Dependency size 0 B 59.53 MB 🚨 +59.53 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 0 123 🚨 +123 🚨
Self size 0 B 1.12 MB 🚨 +1.12 MB 🚨
Dependency size 0 B 22.11 MB 🚨 +22.11 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preact-vite

Before After Difference
Dependency count 0 14 🚨 +14 🚨
Self size 0 B 13 KB 🚨 +13 KB 🚨
Dependency size 0 B 1.44 MB 🚨 +1.44 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 0 155 🚨 +155 🚨
Self size 0 B 30 KB 🚨 +30 KB 🚨
Dependency size 0 B 23.41 MB 🚨 +23.41 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 0 113 🚨 +113 🚨
Self size 0 B 35 KB 🚨 +35 KB 🚨
Dependency size 0 B 19.91 MB 🚨 +19.91 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 0 274 🚨 +274 🚨
Self size 0 B 24 KB 🚨 +24 KB 🚨
Dependency size 0 B 44.43 MB 🚨 +44.43 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server-webpack5

Before After Difference
Dependency count 0 200 🚨 +200 🚨
Self size 0 B 16 KB 🚨 +16 KB 🚨
Dependency size 0 B 33.30 MB 🚨 +33.30 MB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte-vite

Before After Difference
Dependency count 0 19 🚨 +19 🚨
Self size 0 B 55 KB 🚨 +55 KB 🚨
Dependency size 0 B 26.58 MB 🚨 +26.58 MB 🚨
Bundle Size Analyzer Link Link

@storybook/sveltekit

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 56 KB 🚨 +56 KB 🚨
Dependency size 0 B 26.63 MB 🚨 +26.63 MB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3-vite

Before After Difference
Dependency count 0 108 🚨 +108 🚨
Self size 0 B 35 KB 🚨 +35 KB 🚨
Dependency size 0 B 43.67 MB 🚨 +43.67 MB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components-vite

Before After Difference
Dependency count 0 15 🚨 +15 🚨
Self size 0 B 19 KB 🚨 +19 KB 🚨
Dependency size 0 B 1.50 MB 🚨 +1.50 MB 🚨
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 0 183 🚨 +183 🚨
Self size 0 B 775 KB 🚨 +775 KB 🚨
Dependency size 0 B 67.55 MB 🚨 +67.55 MB 🚨
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 0 176 🚨 +176 🚨
Self size 0 B 30 KB 🚨 +30 KB 🚨
Dependency size 0 B 66.12 MB 🚨 +66.12 MB 🚨
Bundle Size Analyzer Link Link

@storybook/core-webpack

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 11 KB 🚨 +11 KB 🚨
Dependency size 0 B 28 KB 🚨 +28 KB 🚨
Bundle Size Analyzer Link Link

create-storybook

Before After Difference
Dependency count 0 50 🚨 +50 🚨
Self size 0 B 1000 KB 🚨 +1000 KB 🚨
Dependency size 0 B 36.90 MB 🚨 +36.90 MB 🚨
Bundle Size Analyzer node node

@storybook/csf-plugin

Before After Difference
Dependency count 0 9 🚨 +9 🚨
Self size 0 B 7 KB 🚨 +7 KB 🚨
Dependency size 0 B 1.26 MB 🚨 +1.26 MB 🚨
Bundle Size Analyzer Link Link

eslint-plugin-storybook

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 131 KB 🚨 +131 KB 🚨
Dependency size 0 B 2.82 MB 🚨 +2.82 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-dom-shim

Before After Difference
Dependency count 0 0 0
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 788 B 🚨 +788 B 🚨
Bundle Size Analyzer Link Link

@storybook/preset-create-react-app

Before After Difference
Dependency count 0 68 🚨 +68 🚨
Self size 0 B 32 KB 🚨 +32 KB 🚨
Dependency size 0 B 5.98 MB 🚨 +5.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-react-webpack

Before After Difference
Dependency count 0 170 🚨 +170 🚨
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 31.29 MB 🚨 +31.29 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-server-webpack

Before After Difference
Dependency count 0 10 🚨 +10 🚨
Self size 0 B 7 KB 🚨 +7 KB 🚨
Dependency size 0 B 1.20 MB 🚨 +1.20 MB 🚨
Bundle Size Analyzer Link Link

@storybook/html

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 29 KB 🚨 +29 KB 🚨
Dependency size 0 B 32 KB 🚨 +32 KB 🚨
Bundle Size Analyzer Link Link

@storybook/preact

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 16 KB 🚨 +16 KB 🚨
Dependency size 0 B 32 KB 🚨 +32 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 0 57 🚨 +57 🚨
Self size 0 B 1.23 MB 🚨 +1.23 MB 🚨
Dependency size 0 B 12.95 MB 🚨 +12.95 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 8 KB 🚨 +8 KB 🚨
Dependency size 0 B 716 KB 🚨 +716 KB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 45 KB 🚨 +45 KB 🚨
Dependency size 0 B 230 KB 🚨 +230 KB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 63 KB 🚨 +63 KB 🚨
Dependency size 0 B 211 KB 🚨 +211 KB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 61 KB 🚨 +61 KB 🚨
Dependency size 0 B 47 KB 🚨 +47 KB 🚨
Bundle Size Analyzer Link Link

@JSMike
Copy link
Copy Markdown
Contributor

JSMike commented Jan 28, 2026

FYI, I pushed separate PR for this, I added @ia319 as co-author. #33686

@ghengeveld
Copy link
Copy Markdown
Member

ghengeveld commented Jan 28, 2026

I think this was already fixed here. Sorry I hadn't seen this PR when I fixed my own mess, otherwise I would've attributed y'all.

@ia319
Copy link
Copy Markdown
Member Author

ia319 commented Feb 3, 2026

Related issues have been fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Built SB renders with wrong path and no addons if visiting /index.html directly

4 participants