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

[kaiyoma]

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:

1. Run a static build (build-storybook)
2. Serve index.html with a web server
3. 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.

[shilman]

Do you have a repro you can share?

[kaiyoma]

Do you have a repro you can share?

Not easily. We run Storybook as part of a large, proprietary project, so I can't post any code. In the meantime, here's a clip showing the issue. Notice that the URL is changing, but the rendering is not.

[shilman]

Are there any error messages in the browser console?

[dimpu]

Same issue for me too. Any update on this?
Version: 6.0.5

No console errors.

[shilman]

@dimpu do you have a repro i can look at?

[kaiyoma]

I can try to work on a repro tonight or tomorrow. No messages in the browser console when this happens.

[shilman]

Really appreciate it @kaiyoma 🙏

If anybody's experiencing this problem and has a public repro, please share here or DM me on Discord

[kaiyoma]

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

After you unzip:

1. yarn install
2. yarn run start-storybook
3. Check the UI and see that clicking the sidebar links works fine
4. yarn run build-storybook
5. Load dist/storybook/index.html in the browser directly or load through a simple HTTP server
6. 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.

[shilman]

Thanks so much. Checking now!

[dimpu]

Hi @shilman Is there any update on this? I got this after I upgraded from 5 to 6 using npx sb upgrade.

[shilman]

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.

[dimpu]

Thanks @shilman .

[ndelangen]

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

[ndelangen]

repro:

• downloaded you zip
• unzipped it
• removed lockfile
• upgraded storybook to latest version
• ran start-storybook
• storybook worked as expected for me
• ran build-storybook
• hosted the build storybook
• storybook preview does indeed NOT update

broken:

• click on a navigation
  expected: the item becomes selected
  actual: it's not selected
  notes: the URL does change

observations:

• knobs work, so the channel isn't broken.
• I'm seeing both attributes on the iframe:
  

[ndelangen]

It seems the storyId & path are never updated in the global state:

[ndelangen]

I'm still debugging this..

It seems something very strange is going on in the router:
I load the page, and click the "LabelValueTable > playground" 2x, and this is what I see in the logs:

And yet...

• The URL changes on the first click
• The props of the Location component change on the second
• the app state never changes

[ndelangen]

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

[ndelangen]

@kaiyoma I hope that work around works for you until we find the root cause

[kaiyoma]

@kaiyoma I hope that work around works for you until we find the root cause

Yup, I can live with this. 😄 Thanks for digging into this!

[ndelangen]

The digging must continue.

[kyleBeikirch]

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

Thanks @ndelangen, that worked for me!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[OfriHarlev]

This is still an issue, is it still being actively worked on?

[shilman]

@OfriHarlev sort of. the workaround is to run with --no-dll. we're focusing on perf in 6.1 and part of that work is trying to get rid of the DLL, which should resolve a bunch of issues including this one.

[OfriHarlev]

When I add --no-dll I get this error
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

From link above:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I checked that I only have one version of react yarn why react => [email protected] and that I have only one version of react dom and that its matching yarn why react-dom => [email protected]

I don't get this without --no-dll and I also don't get this error when using --no-dll with start-storybook

  Operating System: Mac OS 10.14.6
  npm packages:
  "@storybook/addon-a11y": "6.0.21",
    "@storybook/addon-essentials": "6.0.21",
    "@storybook/addons": "6.0.21",
    "@storybook/react": "6.0.21",

[stabback]

@shilman Thanks for your work here. I just burnt an hour debugging this before coming across this issue. Since this is a known problem, I'm happy to update the documentation with a link to this issue and a brief explanation.

The docs could use some information here on these two pages:

• https://storybook.js.org/docs/react/workflows/publish-storybook
• https://storybook.js.org/docs/react/api/cli-options#build-storybook

Do you agree the documentation should be updated until 6.1 introduces a proper fix?

[shilman]

@stabback Thanks for the offer! I believe the documentation for --no-dll was updated recently by @jonniebigodes in the FAQ, but I'm certainly open to adding it in other places if it's helpful

[jonniebigodes]

@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

[stabback]

@jonniebigodes @shilman

https://github.com/storybookjs/storybook/pull/12814

Not super happy with the duplication of the docs, but as it'll be removed with the fix in 6.1 it's only temporary.

Hopefully, it helps save someone a couple of hours of debugging!

[shilman]

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