Storybook: fromId is not defined when using mdx format

[chrispcode]

Describe the bug
Alright, so I have been trying to translate some of my Docz .mdx files to storybook, with version
v5.2.0-alpha.4. And so far so good, I get the canvas tab to work, but when I navigate to the docs tab it crashes saying Cannot read property 'fromId' of undefined.

To Reproduce
Steps to reproduce the behavior:

1. Install @storybook/react and @storybook/addon-docs to version 5.2.0-alpha.4.

1. Add the following configuration:

.storybook/config.js

import { load } from '@storybook/react';

// load(require.context('../stories', true, /\.stories\.js$/), module);
load(require.context('../stories', true, /\.stories\.mdx$/), module);

.storybook/preset.js

module.exports = ['@storybook/addon-docs/common/preset'];

.storybook/webpack.config.js

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

const babelrc = path.resolve(__dirname, '.babelrc');

module.exports = async ({ config }) => {
  console.log(config.module.rules);
  config.module.rules.push({
    test: /\.mdx$/,
    use: [
      { 
        loader: 'babel-loader',
        options: {
          configFile: babelrc
        }
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });
  return config;
};

.storybook/addons.js

import '@storybook/addon-docs/register';

.storybook/.babelrc

{
  "presets": [
    "@babel/preset-react"
  ]
}

1. Add a stories.mdx file, let's say /stories/button.stories.mdx with the following content:

stories/button.stories.mdx

import { Story } from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/react/demo';

export const componentMeta = {
  title: 'MDX|Button',
}

# Hello Docs

Welcome to the future of Storybook!

<Story name="hello">
  <Button >Hello button!</Button>
</Story>

1. Run storybook and navigate to that documentation

Expected behavior
The Docs tab open, and shows the documentation

Screenshots

Code snippets
You can find them in the reproduce section.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: react
• Addons: @storybook/addon-docs
• Version: v5.2.0-alpha.4

Additional context
I think I have added everything, If more information is needed, I will provide it!

[shilman]

Some comments:

• You can use @storybook/addon-docs/react/preset since you're using @storybook/react
• The following configurations are redundant with the preset and should be removed:
  
  
  
  • webpack.config.js
  
  
  • .babelrc
  
  
  • addons.js
  
  

Try getting rid of those and maybe it will solve the problem?

[chrispcode]

If I remove them, I get a transpilation error:

[chrispcode]

If I add only the webpack configuration, and remove the link to the .babelrc I get a react syntax error:

[chrispcode]

If I add the .babelrc as well the project compiles with no errors, but the docs tab does not show up.

[chrispcode]

Also the preset change does not effect it, in my situation

[shilman]

Oh, rename your file to presets.js

[chrispcode]

Yes, that was the solution! Sorry for losing your time with this guys.

[eden-lane]

I have the same issue in storybook 5.3.14
My main.js file is

module.exports = {
  stories: ['../app/**/*.stories.mdx'],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      }
    },
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  presets: [
    '@storybook/preset-typescript',
  ],
};

Solved:
I forgot to set up DocsPage in .storybook/preview.js

[shilman]

@eden-lane Hmm, the docs preset should set up DocsPage automatically? 🤔

[eden-lane]

This doc says nothing about preset so I didn't use it (I tried but it didn't work, so I just followed the steps from docs)

[shilman]

@eden-lane this line is the preset:

addons: ['@storybook/addon-docs'],

[ufollettu]

SOLVED: : upgrading to 5.3.14 solved the problem!

I have a similar issue using web-components and knobs addon. The Canvas tab works fine, but the docs tab pointing to ?path=/docs/zbutton--primary raise the error

Cannot read property 'fromId' of undefined

I have this story file:

import { html } from "lit-html";
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { withKnobs, text, boolean } from "@storybook/addon-knobs";

export const zButtonProps = () => ({
  buttonid: text("buttonid", "id1"),
  label: text("label", "my button"),
  type: text("type", "primary"),
  isdisabled: boolean("isdisabled", false),
  issmall: boolean("issmall", false),
  icon: text("icon", "download")
});

<Meta title="ZButton" component="z-button" decorators={[withKnobs]} />

# ZButton

// With `MDX` we can define a story for `ZButton` right in the middle of our markdown documentation.

<Preview>
  <Story name="primary">
    {html`
      <z-button
        isdisabled="${zButtonProps().isdisabled}"
        label="${zButtonProps().label}"
        buttonid="${zButtonProps().buttonid}"
        type="${zButtonProps().type}"
        issmall="${zButtonProps().issmall}"
        icon="${zButtonProps().icon}"
      ></z-button>
    `}
  </Story>
</Preview>

<Props of="z-button" />

This is the .storybook/main.js file:

module.exports = {
    stories: [
        // files MUST end with .story.mdx or .stories.mdx (@see https://github.com/storybookjs/storybook/issues/9918)
        '../web-components-library/src/components/**/*.story.mdx',
        '../web-components-library/src/components/**/*.stories.mdx',
    ],
    addons: [
        '@storybook/addon-viewport/register',
        '@storybook/addon-knobs/register',
        {
            name: '@storybook/addon-docs',
            options: {
                configureJSX: true,
                babelOptions: {},
                sourceLoaderOptions: null,
            },
        },
    ],
};

And this is the .storybook/preview.js:

import { setCustomElements } from '@storybook/web-components';
import customElements from '../web-components-library/custom-elements.json';

// bound generated Stencil documentation with Props table (https://github.com/storybookjs/storybook/blob/next/addons/docs/web-components/README.md)
setCustomElements(customElements);

This is the relevant part of the custom-elements.json file:

{
  "version": 1.1,
  "tags": [
    {
      "name": "z-button",
      "description": {
        "kind": "markdown",
        "value": "<!-- readme-group=\"buttons\" -->\n\n```html\n<z-button label=\"button\" type=\"primary\"></z-button>\n<z-button label=\"button\" type=\"primary\" icon=\"download\"></z-button>\n<z-button label=\"button\" type=\"primary\" isdisabled icon=\"download\"></z-button>\n<z-button label=\"button\" type=\"secondary\"></z-button>\n<z-button label=\"button\" type=\"secondary\" isdisabled></z-button>\n<z-button label=\"button\" type=\"tertiary\"></z-button>\n<z-button label=\"button\" type=\"tertiary\" isdisabled></z-button>\n<z-button label=\"button\" type=\"primary\" issmall></z-button>\n<z-button label=\"button\" type=\"primary\" issmall icon=\"download\"></z-button>\n<z-button label=\"button\" type=\"primary\" issmall isdisabled icon=\"download\"></z-button>\n<z-button label=\"button\" type=\"secondary\" issmall></z-button>\n<z-button label=\"button\" type=\"secondary\" issmall isdisabled></z-button>\n<z-button label=\"button\" type=\"tertiary\" issmall></z-button>\n<z-button label=\"button\" type=\"tertiary\" issmall isdisabled></z-button>\n```"
      },
      "attributes": [
        {
          "name": "buttonid",
          "description": "id, should be unique"
        },
        {
          "name": "icon",
          "description": "add an icon to button (optional)"
        },
        {
          "name": "isdisabled",
          "description": "disable button"
        },
        {
          "name": "issmall",
          "description": "reduce button size (optional)"
        },
        {
          "name": "label",
          "description": "label content"
        },
        {
          "name": "type",
          "description": "graphic variant"
        }
      ]
    }
]

It seems that the problem is the sourceId:

[bcbrian]

@shilman I get this OPs error when I use pnpm switching to yarn or pm the issue goes away. I love the work you all are doing and know this may not be an issue you want to or can address (might be pnpm's issue). If you want me to make an actual issue that addresses this issue and try to solve it, I will. Mostly just dropping this here, so hopefully, someone else can be saved a few days worth of debugging. 😄

[shilman]

@bcbrian if it's a PNPM issue it could be something to do with react versions. storyStore gets passed in by a react context, and gets consumed by a useContext hook, and I've observed that hooks fail if there are multiple versions of react.

[brandonpittman]

@shilman Storybook/Angular is using an older version of React compared to the addon-packages. Probably causing the issue for me.