Storybook: Storybook 6.1.4 UI completely broken: TypeError: Cannot read property 'source' of undefined

[kaiyoma]

Describe the bug
I'm trying to upgrade my Storybook from 6.1.0-beta.2 to 6.1.4 without changing anything else and the UI is badly broken. The spinner runs forever and there are console errors.

To Reproduce
Steps to reproduce the behavior:

1. Upgrade Storybook from 6.1.0-beta.2 to 6.1.4 without changing anything else.

Expected behavior
The UI should work.

System

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

Additional context
I see this error and stack trace in the console twice:

TypeError: Cannot read property 'source' of undefined
    at getEventMetadata (vendors~main.f3edf003926dde8721bc.bundle.js:31937)
    at handler (vendors~main.f3edf003926dde8721bc.bundle.js:34867)
    at vendors~main.f3edf003926dde8721bc.bundle.js:108401
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (vendors~main.f3edf003926dde8721bc.bundle.js:108400)
    at PostmsgTransport.<anonymous> (vendors~main.f3edf003926dde8721bc.bundle.js:108287)
    at PostmsgTransport.handler (vendors~main.f3edf003926dde8721bc.bundle.js:71540)
    at PostmsgTransport.handleEvent (vendors~main.f3edf003926dde8721bc.bundle.js:71714)

[shilman]

@ndelangen @tmeasday Looks like this is either related to composition or to the core refactor. can you guys work it out?

@kaiyoma do you happen to have a repro repo?

[jesusmpc]

Im experiencing something similar, Im also on 6.1.4, using composition, everything loads OK first time, but when I try to load a new version from an external ref, spinner goy stuck and I dont see iframe.html refreshing for new version.

I dig a liitle and found that if I add a key (key = src) to https://github.com/storybookjs/storybook/blob/db9b0bd6fe8ef007334651299148d6d6ede3083d/lib/ui/src/components/preview/iframe.tsx component, now iframe.html is loaded and spinner goes by OK.

Don't know if it's related, but is annoying XD.

[jesusmpc]

Also, again, let mw know if you guys want to open a new thread, but I see that with Composition exteral refs, that have docs, the latter ones are not rendering OK in sidebar (they look like an story):

when it should be:

Have someone experienced the same?

[tmeasday]

@shilman I don't think anything in core changed between 6.1.0-beta.2 to 6.1.4. I suspect this is a sidebar change @ghengeveld and @ndelangen made?

[ghengeveld]

This last thing appears to be single story hoisting gone awry somehow. Could you share the story file for one of these? https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting

[jesusmpc]

@ghengeveld those are stories that uses MDX:

import { Meta, Description } from "@storybook/addon-docs/blocks";
import Readme from "../README.md";

<Meta title="Guides/Getting Started" />

&nbsp;

<Description>{Readme}</Description>

We follow this: https://storybook.js.org/docs/react/writing-docs/mdx#documentation-only-mdx

[ndelangen]

@ghengeveld pair programming meeting to fix it?

[shilman]

that's a docs-only MDX page @ghengeveld

[ghengeveld]

@kaiyoma We tried to debug your issue but without a Storybook to reproduce it with (or any other info regarding your setup), there's very little to go on.

@jesusmpc Please open a new issue for the sidebar bug, it is unrelated to the issue at hand.
The composition issue also appears unrelated, so please open a separate issue for that as well.

[ghengeveld]

@jesusmpc So far I've not been able to reproduce your issue. I copied your exact mdx snippet into a new stories file in the cra-kitchen-sink example, and here's what I see:

This uses Storybook 6.1.5

[jesusmpc]

@ghengeveld are you loading that example I give via external ref?, because my example is loading that information via Composition.

[jesusmpc]

@ghengeveld I downloaded cra-kitchen-sink, built it and generated stories.json with npx sb extract, if I query the static storybook site I see this:

But if I load that from another storybook using external references, I see this:

I configure my site as this:

"my-site": {
      title: "Site Title",
      url: "http://localhost:8080/doc/storybook/1.0.0-test"
},

As I mentioned before I see that it looks different from where I query it, directly as an static or via external refs (composition)

[kaiyoma]

@shilman @jesusmpc 6.1.3 is broken also. I can keep trying older versions until I pinpoint a more exact range where the breakage happened. Is there any other info you'd want in the meantime?

[kaiyoma]

After a morning's worth of installing packages over and over, it turns out this was some weird issue with my node_modules. Every version of Storybook I tried (even going back to 6.0) was broken in the same way, in every browser, but was working just fine for a coworker. I hadn't done a clean install in a while (i.e. blow away node_modules and all my caches and reinstall all packages from scratch), so I did that and - wouldn't you know? - everything is working just fine now. Welcome to web development in 2020! 🤦‍♂️

Sorry for the trouble. I just installed 6.1.5 and it seems to be running normally for me.

[tmeasday]

Welcome to web development in 2020! 🤦‍♂️

Sadly this has been the state of web-development for some time.