Storybook: Docs-addon: Error displayed when viewing non-mdx stories

[rkara]

Describe the bug
When leveraging the docs plugin (@storybook/addon-docs) to render MDX files on an Angular project that has pre-existing *.stories.ts files, an error is displayed when viewing the Docs add-on.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to Story that is written within *.stories.ts file.
2. Select "Canvas" Tab
3. Component renders properly
4. Select "Docs" Tab
5. See error
6. Select "Canvas" Tab
7. See error

Expected behavior
Docs addon should be hidden or display a user friendly error if there is not documentation associated with the story. Error should not be displayed for subsequent use of storybook after seeing error.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

System:

• OS: Windows 10
• Browser: Chrome, Edge, Firefox
• Framework: Angular
• Addons: @storybook/addon-docs
• Version: 5.2.0-alpha.41

{
   ...
    "@storybook/addon-a11y": "5.2.0-alpha.41",
    "@storybook/addon-actions": "5.2.0-alpha.41",
    "@storybook/addon-docs": "5.2.0-alpha.41",
    "@storybook/addon-knobs": "5.2.0-alpha.41",
    "@storybook/addon-links": "5.2.0-alpha.41",
    "@storybook/addon-notes": "5.2.0-alpha.41",
    "@storybook/addon-viewport": "5.2.0-alpha.41",
    "@storybook/addons": "5.2.0-alpha.41",
    "@storybook/angular": "5.2.0-alpha.41",
   ...
}

[shilman]

Hi @rkara, thanks for this!

There are two issues here:

• Docs not recovering from errors
• Something relating to markdown-to-jsx

The first one is a duplicate to #7165 and will get fixed before we release.

The second I haven't seen before and I'd like to get to the bottom of it. Storybook already displays an error message when there are no docs associated with the story, so there's something else going on here.

Can you share the story that threw the error, and also whatever docs setup you have in config.js? Thanks! 🙏

[rkara]

No problem!

import { object } from '@storybook/addon-knobs';
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { withDesign } from 'storybook-addon-designs';

import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

storiesOf('Material/Components/Data Display', module)
  .addDecorator(withDesign)
  .addDecorator(
    moduleMetadata({
      imports: [
        MatIconModule,
        MatListModule,
      ],
    }),
  ).add('List', () => ({
    styles: [
      `
      .mat-icon {
        margin: 10px;
      }
      `,
    ],
    template: `
      <mat-nav-list>
        <mat-list-item *ngFor="let item of items; let index = index" (click)="selected=index">
          <mat-icon>{{ item.icon }}</mat-icon>
          <div>{{ item.label }}</div>
        </mat-list-item>
      </mat-nav-list>
      `,
    props: {
      items: object('items', [
        {
          label: 'first',
          icon: 'home',
        },
        {
          label: 'second',
          icon: 'face',
        },
        {
          label: 'third',
          icon: 'group_work',
        },
        {
          label: 'fourth',
          icon: 'grade',
        },
        {
          label: 'fifth',
          icon: 'feedback',
        },
      ], 'LIST-ITEMS-GROUP'),
      selected: 0,
    },
  }));

and here's my config.js

import { load, addDecorator, addParameters, configure } from '@storybook/angular';
import { create  } from '@storybook/theming';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
import { initializeRTL } from 'storybook-addon-rtl';
import { DocsPage } from '@storybook/addon-docs/blocks';

// Import the External Themes
import '!style-loader!css-loader!sass-loader!./styles.scss';

const theme = create({
  base: 'light',

  brandTitle: 'Brand Title',
  brandImage: '/assets/logo.png',
});

addDecorator(withA11y);
addDecorator(withKnobs);
initializeRTL();

addParameters(
  {
    options: {
      theme
    },
    docs: DocsPage,
  });

// automatically import all files ending in *.stories.ts
load(require.context('./root/stories', true, /\.stories\.ts$/));
load(require.context('./root/stories', true, /\.stories\.mdx$/));
load(require.context('../projects/proprietary-project', true, /\.stories\.ts$/));
load(require.context('../projects/proprietary-project', true, /\.stories\.mdx$/));

[shilman]

@rkara Sorry this got lost in the shuffle. I think I fixed it in #7596 which went out in 5.2.0-beta.18. Can you give it a try and let me know if it solves your problem?

[domjacks]

Hi @shilman. I still get issues with markdown-to-jsx showing:
Error "markdown-to-jsx: the first argument must be a string"

I only get this when trying to add more than one story and try and select the "Docs" tab. It's like when it tries to render the non-Primary stories on the docs page it bombs out.

[shilman]

Are you using notes or or info? Pretty sure it has something to do with that. Do you have a repro I could look at?

[rkara]

@shilman my configuration isn't loading properly with the latest version.

The browser is firing an error of when load is called.

Uncaught TypeError: Object(...) is not a function
    at Module../.storybook/config.js (main.72f135f2e990b9b6e07d.bundle.js:78)
    at __webpack_require__ (runtime~main.72f135f2e990b9b6e07d.bundle.js:786)
    at fn (runtime~main.72f135f2e990b9b6e07d.bundle.js:151)
    at Object.0 (main.72f135f2e990b9b6e07d.bundle.js:34573)
    at __webpack_require__ (runtime~main.72f135f2e990b9b6e07d.bundle.js:786)
    at checkDeferredModules (runtime~main.72f135f2e990b9b6e07d.bundle.js:46)
    at Array.webpackJsonpCallback [as push] (runtime~main.72f135f2e990b9b6e07d.bundle.js:33)
    at main.72f135f2e990b9b6e07d.bundle.js:1

[domjacks]

Are you using notes or or info? Pretty sure it has something to do with that. Do you have a repro I could look at?

Unfortunately it's a private repo. But we're using notes. I've just enabled DocsPage in my config:

addParameters({
  docs: DocsPage
});

If there is only one story for the component, it renders the docs with the primary story along with the prop table (using prop-types and docgen) all correctly. As soon as I add a second story using .add() I get the error.

[shilman]

@rkara there was a breaking change recently. Rename load to configure and you should be good. Also make sure it's only called once

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md

[shilman]

@domjacks can you paste an example notes parameter from one of the stories that breaks? Feel free to obscure the data as long as the types match up

[domjacks]

So we have this:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import Component from '.';
import readme from './README.md';

storiesOf('Component', module)
  .add(
    'default',
    () => {
      const content = text('content', 'Text Here');

      return <Component>{content}</Component>;
    },
    { notes: { markdown: readme }, component: Component }
  )
  .add(
    'second',
    () => {
      const content = text('content', 'Text Here');

      return <Component>{content}</Component>;
    },
    { notes: { markdown: readme }, component: Component }
  );

[domjacks]

Okay so I figured it out. It was my bad, but I declared the notes config on both stories. This is what causes the error.

Once I removed that it worked.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import Component from '.';
import readme from './README.md';

storiesOf('Component', module)
  .add(
    'default',
    () => {
      const content = text('content', 'Text Here');

      return <Component>{content}</Component>;
    },
    { notes: { markdown: readme }, component: Component }
  )
  .add(
    'second',
    () => {
      const content = text('content', 'Text Here');

      return <Component>{content}</Component>;
    }
  );

[rkara]

I'm still seeing the error even when I only have one set of notes defined for a story within a ts file.

[shilman]

@domjacks @rkara I think you guys may have a problem with your webpack loaders. I've updated the code to fail with a more legible error that's easier to debug and will hopefully be releasing that shortly.

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.20 containing PR #7650 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.