故事书错误：找不到与“组件按钮-页面”匹配的故事

Question

我似乎无法解决我在 Storybook 中遇到的这个错误。我有以下名为 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' }
}} />

我收到以下错误：

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

我尝试在其中放置一个带有该 ID 的空白故事，但这似乎没有解决任何问题。我刚刚收到一个新错误

Uncaught Error: Docs-only story

我还没有在这里看到任何与此相关的内容。

Answer 1

就我而言，问题很简单，我试图加载不存在的故事：

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

相反，我应该加载这个:)

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

Answer 2

故事书的文档似乎没有提到一些重要的内容：

• <Story/>组件必须有一个至少包含一个字符的名称属性
• <Story/>组件中必须至少有一个子组件

这意味着，使用组件时渲染 mdx 文件的最低要求<Story/>是：

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

这与<Story/>组件是否包裹在<Canvas/>组件周围无关。

问题的后半部分是<Canvas/>组件，它只有一个条件：

• 它必须至少有一个子级

<Canvas/>所以渲染的最低要求是这样的：

<Canvas>
    <Button/>
</Canvas>

将所有内容结合到您的案例场景中，您需要做的<Canvas/>是：

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

尝试这样设置，然后刷新页面。

Answer 3

如果您使用的是 Storybook v6. 尝试检查您的故事属性.storybook/main.js。确保路径/文件类型正确。

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