question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 image

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",
   ...
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:14 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
domjackscommented, Jul 30, 2019

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 }
  );

1reaction
domjackscommented, Jul 30, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Docs Addon | Storybook: Frontend workshop for UI development
DocsPage is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
Read more >
How to make a stories.mdx file in Storybook? - Stack Overflow
Try to do it this way: import { Story, Meta, Canvas } from "@storybook/components"; import Text from "."; <Meta title="MDX/Text" ...
Read more >
Storybook Docs with mdx support and addon knobs - Medium
Here's what one of our most basic stories ended up as… This will show up on the main page where we can see...
Read more >
Setup CSF + MDX stories with @storybook/addon-docs - GitLab
I'm not sure where to go from there. I wonder if it would make sense to stop displaying those docs in design.gitlab.com ....
Read more >
Compare DocsPage and MDX syntax in Storybook with example
card.stories.mdx --> import { Meta } from '@storybook/addon-docs/blocks'; <meta ... in a Canvas block by default where we cannot opt out of displaying...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found