[6.0.0-alpha.33-36] cannot read property 'fromId' of undefined in docs page

[idbartosz]

Describe the bug Navigating to docs page in Storybook 6.0.0-alpha.33-36 (32 works normally) shows a screen with Cannot read property 'fromId' of undefined error. Many additional errors are show in the console.

VM106 vendors~main.5453e29e3974fa7fe208.bundle.js:58602 Uncaught TypeError: Cannot read property 'subcomponents' of undefined

VM106 vendors~main.5453e29e3974fa7fe208.bundle.js:58880 Uncaught TypeError: Cannot read property 'fromId' of undefined

VM106 vendors~main.5453e29e3974fa7fe208.bundle.js:384927 The above error occurred in the <Context.Consumer> component

Additional context Docs use MDX combined with CSF and those errors happen only in docs view (story renders normally)

To Reproduce Navigate to docs page.

Expected behavior Should show docs normally.

Screenshots

System:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 75.0
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/addon-docs: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/addon-info: 5.3.12 => 5.3.12 
    @storybook/addon-knobs: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/addon-links: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/addon-notes: ^5.3.12 => 5.3.18 
    @storybook/addon-storysource: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/addon-viewport: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/addons: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/react: v6.0.0-alpha.36 => 6.0.0-alpha.36 
    @storybook/source-loader: v6.0.0-alpha.36 => 6.0.0-alpha.36 

[shilman]

@idbartosz do you have a repro repo i could look at?

[idbartosz]

@shilman I've tried to bootstrap a base example with npx -p @storybook/cli@6.0.0-alpha.37 sb init --type react but after npm run storybook it's complaining about missing loader.

[idbartosz]

I'm closing this issue. It seems that problem is with Storybook configuration on my side (mainly webpack), it's requires some cleanups to align with latest alpha releases.

PS. bootstrap npx -p @storybook/cli@6.0.0-alpha.40 sb init --type react (current latest alpha) is still missing "babel-loader" with "@babel/plugin-transform-react-jsx" for /\.(stories|story)\.[tj]sx?$/ rule.

[brandonpittman]

@idbartosz Same issue here.

[lmestel]

I have the same problem with Storybook 6.3.0-rc.8 and vite-builder (initialized via npx sb@next init --builder storybook-builder-vite). Canvas looks good, Docs thow Uncaught TypeError: Cannot read property 'fromId' of undefined

Repo to reproduce: https://github.com/lmestel/storybook-demo-vite-mdx

[shilman]

@lmestel please file on the builer-vite repo

[timbomckay]

I just updated to 6.3.1 and am getting this error in our docs view.

Packages:

"@storybook/addon-essentials": "^6.3.1",
"@storybook/addon-knobs": "^6.3.0",
"@storybook/theming": "^6.3.1",
"@storybook/vue": "^6.3.1",

MDX File:

import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { NucleusScreenSize } from '../../src';

<Meta title="Core/Mixins/ScreenSize" />

# NucleusScreenSize

The NucleusScreenSize is a Vue mixin which handles the subscription to nuBreakpoint on creation and the clean up on beforeDestroyed.  In addition, it adds the following public data properties: isSmall, isMedium, isLarge, isXLarge, and isMobile.

...continued markdown...

<Canvas>
  <Story name="Example">{{
    mixins: [NucleusScreenSize],
    template: `<div class="markdown-body">
      <table>
        <thead>
          <tr>
            <th scope="col">Size Boolean</th>
            <th scope="col">Value</th>
          </tr>
        </thead>
        <tbody class="nu-font-sm">
          <tr>
            <td>isSmall</td>
            <td class="nu-position-relative"><code>{{ isSmall }}</code></td>
          </tr>
          <tr>
            <td>isMedium</td>
            <td class="nu-position-relative"><code>{{ isMedium }}</code></td>
          </tr>
          <tr>
            <td>isLarge</td>
            <td class="nu-position-relative"><code>{{ isLarge }}</code></td>
          </tr>
          <tr>
            <td>isXLarge</td>
            <td class="nu-position-relative"><code>{{ isXLarge }}</code></td>
          </tr>
          <tr>
            <td>isMobile</td>
            <td class="nu-position-relative"><code>{{ isMobile }}</code></td>
          </tr>
        </tbody>
      </table>
    </div>
  `,
  }}</Story>
</Canvas>

I was also getting this in 6.3.0 but that's when I first saw this error. Thought it might have been fixed in the 6.3.1 update but it appears to persist.

Here are the errors I'm getting:

Let me know if I'm not doing something correctly but it seems pretty basic, aligned with the documentation.

Thanks

[Emptymu]

@timbomckay Did you fix this? I'm experiencing similar issues

[shilman]

@timbomckay are you also using the vite builder?

[timbomckay]

@Emptymu we only had one or two stories using the MDX method so we just converted them to an exported typescript file. Haven't tested it since.

@shilman we're not using vite. Are we suppose to be?

[shilman]

@timbomckay no, I was only asking because this error showed up in the vite builder also. since the vite builder is still pretty raw, I generally assume that any issues that come up are due to something weird about the builder and not due to Storybook core. But if you're not using the vite builder then it's something else.

[timbomckay]

I did just upgrade node from v10 to v14. Think that would have something to do with it?