storybook: The static build of Storybook 6 is DOA (sidebar links don't work)

Describe the bug Sidebar links in a static build of Storybook 6 don’t work properly. Clicking on a link changes the URL, but the frame doesn’t update and the rendering doesn’t change. The first component loaded continues to appear on-screen.

I’ve tested 6.0.0, 6.0.4, and 6.0.5, and they all have this problem.

To Reproduce Steps to reproduce the behavior:

Run a static build (build-storybook)
Serve index.html with a web server
Click any link in the sidebar

Expected behavior The UI should work correctly.

System:

My laptop:

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\Node.js\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Chrome: 84.0.4147.125
    Edge: Spartan (44.19041.423.0), Chromium (84.0.522.59)
  npmPackages:
    @storybook/addon-actions: 6.0.5 => 6.0.5
    @storybook/addon-knobs: 6.0.5 => 6.0.5
    @storybook/addons: 6.0.5 => 6.0.5
    @storybook/core: 6.0.5 => 6.0.5
    @storybook/react: 6.0.5 => 6.0.5
    @storybook/theming: 6.0.5 => 6.0.5

I’m seeing the same problems in our CI system, which runs Linux.

Additional context Running the dev server (start-storybook) works correctly. It’s only the static build that is broken. There are no warnings or errors during the build and no warnings or errors in the browser console. Storybook 5 did not have this issue.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 15
Comments: 32 (19 by maintainers)

Most upvoted comments

disabling the DLL seems to resolve this issue (but result in a longer build-time)

for now, run build-storybook --no-dll if you run into this problem

+12

ndelangen on Aug 20, 2020

Back from vacation, This is on my agenda for this week!

ndelangen on Aug 17, 2020

Yes, was able to identify the problem with @tmeasday but still don’t have any idea exactly why it’s happening or how to fix.

The problem is on this line: https://github.com/storybookjs/storybook/blob/master/lib/channel-postmessage/src/index.ts#L117

For reasons that we don’t understand the iframe is getting re-rendered and the data-is-loaded attribute is getting cleared in the built storybook.

I’ve assigned this to @ndelangen who is most familiar with this part of the code for further investigation.

shilman on Aug 14, 2020

Here’s a small, simple repro: issue-11958.zip

After you unzip:

yarn install
yarn run start-storybook
Check the UI and see that clicking the sidebar links works fine
yarn run build-storybook
Load dist/storybook/index.html in the browser directly or load through a simple HTTP server
Check the UI and see that clicking the sidebar links doesn’t work

One other random observation, that may or may not be related: with either kind of build, after the UI loads for the first time, if you click a sidebar link for a different component, the first component’s group closes up. Storybook 5 didn’t work that way.

kaiyoma on Aug 13, 2020

Thanks so much. Checking now!

shilman on Aug 13, 2020

Workaround & documented. Closing. Will remove DLL in 6.1 #12637

shilman on Oct 22, 2020

@stabback we welcome changes to the documentation. I’m ok with some changes to both pages you mentioned. Regarding the changes you’re proposing, we could do the following:

cli-options we could adjust the wording a bit and give a clearer message.
publish-storybook short term until 6.1 lands we could tweak the wording a bit to address the issue at hand give a clearer message.

Loop me in when you’ve created the pull request if you don’t mind and we’ll take it from there.

Sounds good

jonniebigodes on Oct 15, 2020

The digging must continue.

ndelangen on Aug 20, 2020