-
-
Notifications
You must be signed in to change notification settings - Fork 9.8k
Description
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.
Expected behavior
Addons being rendered immediately after first entering the page.
Reproduction link
https://github.com/pscheede/storybook-bug-reproduction
Reproduction steps
- Clone the reproduction repository, which was created using
npm create vite@lastestand thennpm create storybook@latestwithout any custom changes. npm install&npm run build-storybook- Start a webserver to host files inside
storybook-static, e.g.python3 -m http.server - 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. - 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.11Additional 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
Type
Projects
Status