Storybook Error: Couldn't find story matching 'components-button--page'

user_8344506 0
Viewed 7918

I can't seem to resolve this error I am getting in Storybook. I have the following file called Button.stories.mdx:

import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Button from './Button';
import ButtonStory from './Button.stories.tsx'

<Meta title="Components/Button" component={Button} />

export const Template = (args) => <Button {...args } />

# Button Component

---

This Button component is supposed to handle all states for a button. It extends off of the HTML button type so that you should have all native HTML features that a button would provide.
We may make some of these optional props required if we deam that it is important. This is usually an accessibility call.

This button should handle actions that occur on the page and if you want to use a href to make it a link you should surround it within an a tag.

Types supported by aero-design-system:

- Primary
- Secondary

## Quick Start
To create a button, use import the `Button` and give it the following props `props`.

<Canvas>

</Canvas>

<ArgsTable of={Button} args={{
    backgroundColor: { control: 'color' }
}} />

And I am getting the following error:

Couldn't find story matching 'components-button--page'.

I have tried placing a blank story in there with that ID but that didn't seem to fix anything. I just got a new error

Uncaught Error: Docs-only story

I haven't been able to see anything related to this on here yet.

storybook
3 Answers

Something that storybook's documentation doesn't seem to mention is a few important bits:

  • <Story/> component must have a name property with at least ONE character
  • <Story/> component must have at least a single child within it

Meaning, the minimum requirement to get the mdx file to render when using the <Story/> component is this:

<Story name="default">
    <Button/>
</Story>

This is regardless of whether the <Story/> component is wrapped around the <Canvas/> component or not.

The second half of the problem is <Canvas/> component, and it has just one condition:

  • It must have at least a single child within it

so the mimimum requirement for <Canvas/> to render is this:

<Canvas>
    <Button/>
</Canvas>

Combining everything together for your case scenario, what you need to do with <Canvas/> is this:

<Canvas>
   <Story name="default">
      <Button/>
   </Story>
</Canvas>

Try setting it that way, then refresh the page.

user_103832670

In my case, the problem was simple, I was trying to load unexisting story:

http://localhost:6006/?path=/story/spoiler--primary

instead, I should've loaded this :)

http://localhost:6006/?path=/story/testcomponent--primary
user_60863660

If you are using storybook v6. Try to check stories property at your .storybook/main.js. Make sure the path/file type is correct.

module.exports={
  stories:[
    '../src/components/Button.stories.mdx', // default page
    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
  ]
}
user_132280340
Related