Skip to content

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

@pscheede

Description

@pscheede

Describe the bug

When opening a built storybook in the browser, no addons in the toolbar are being rendered. This only seems to be a problem when explicitly adding index.html to the end of the URL.

Image

Expected behavior

Addons being rendered immediately after first entering the page.

Image

Reproduction link

https://github.com/pscheede/storybook-bug-reproduction

Reproduction steps

  1. Clone the reproduction repository, which was created using npm create vite@lastest and then npm create storybook@latest without any custom changes.
  2. npm install & npm run build-storybook
  3. Start a webserver to host files inside storybook-static, e.g. python3 -m http.server
  4. Open http://localhost:8000/index.html (or whatever your URL is). It is important the URL ends in index.html, because without it I could not reproduce the bug. I used Chrome for this.
  5. Storybook is now displaying the "Configure your project" page, but not rendering the addons in the toolbar.

System

│

│  Storybook Environment Info:
│

│  System:
│  OS: macOS 26.2
│  CPU: (10) arm64 Apple M2 Pro
│  Shell: 4.0.2 - /opt/homebrew/bin/fish
│  Binaries:
│  Node: 22.16.0 -
│  /Users/<user>/.local/state/fnm_multishells/1811_1768464241617/bin/node
│  npm: 10.9.2 -
│  /Users/<user>/.local/state/fnm_multishells/1811_1768464241617/bin/npm
│  <----- active
│  Browsers:
│  Chrome: 144.0.7559.60
│  Edge: 143.0.3650.139
│  Safari: 26.2
│  npmPackages:
│  @storybook/addon-a11y: ^10.1.11 => 10.1.11
│  @storybook/addon-docs: ^10.1.11 => 10.1.11
│  @storybook/addon-vitest: ^10.1.11 => 10.1.11
│  @storybook/vue3-vite: ^10.1.11 => 10.1.11
│  storybook: ^10.1.11 => 10.1.11

Additional context

When I click on any story or document after reproducing the bug, the addons appear.

This seems to be connected to the path query parameter, which is ?path=/ when the bug happens and ?path=/docs/configure-your-project--docs when the addons are correctly rendered. This can also be clearly seen in the screenshots I provided.

When I don't include index.html in the URL, the path parameter is also never /, as it is immediately set to the id of the first story.

In my own project I was able to implement a workaround, by adding the following to the manager.ts.

import { DOCS_RENDERED } from 'storybook/internal/core-events';
import { addons } from 'storybook/manager-api';

addons.register('workaround/redirect-root', (api) => {
  api.on(DOCS_RENDERED, () => {
    const params = new URLSearchParams(window.location.search);
    if (!params.get('path') || params.get('path') === '/') {
      api.selectStory('configure-your-project--docs'); // id of first story
    }
  });
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions