如何解决故事书未加载故事的问题？

Question

我正在尝试使用 react guide 加载演示故事书故事（withText、withIcon），但我无法运行任何示例故事。

为免生疑问，这里是代码文件（Histogram.stories.js）：

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      ???? ???? ???? ????
    </span>
  </Button>
);

还有我的main.js

module.exports = {
    stories: ['../src/**/*.stories.jsx?'],
};

当我运行npm run storybook 时，我得到了这个页面：

这是 devconsole 中的输出：

vendors~main.9bf87aec509ee033c0f8.bundle.js:135070 Download the React DevTools for a better development experience: https://fb .me/react-devtools
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map
DevTools failed to parse SourceMap: http://localhost:60923/unfetch.mjs.map

这并没有显示出了什么问题。

同样我看不到命令​​行设置有什么问题

> start-storybook

info @storybook/react v5.3.18
info 
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook\main.js".
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
webpack built 618e1f89c3579e851a85 in 52146ms
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.3.18 started                         │
│   1.37 min for manager and 1.37 min for preview    │
│                                                    │
│    Local:            http://localhost:60923/       │
│    On your network:  http://192.168.0.15:60923/    │
│                                                    │
╰────────────────────────────────────────────────────╯

我能找到的唯一似乎相关的 CLI 选项是 --debug-webpack，但在我的情况下这不会产生进一步的输出。

我可以做些什么来进一步解决这个问题？

Answer 1

您的./storybook 文件夹中的main.js 包含stories: ['../src/**/*.stories.jsx?'], 行，因为您的故事被命名为Histogram.stories.js，它应该如下所示。

module.exports = {
  stories: ['../src/**/*.stories.js']
};

我尝试使用您的 main.js 在我的代码中复制这一点，同样的事情也发生在我身上。也像这样添加? stories: ['../src/**/*.stories.js?'] 会产生同样的错误

编辑-您可以通过像 stories: ['../src/**/*.stories.js(x)?'] 这样修改行来检查 .js 和 .jsx

编辑（2021 年 7 月 24 日） - 从今天开始，在使用 npx sb init 安装故事书并选择 react 作为模板时，它会自动在 main.js 文件中添加以下 sn-p

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

解决了这个问题

Answer 2

重新保存故事文件。 它使组件重新出现在侧面板中，然后您可以看到错误。

start-storybook 似乎默默地失败了。但是您可以通过逐个重新保存文件来解决错误。

Answer 3

我遇到了同样的问题，即“故事书 UI 中没有显示故事”，这让我来到了这里。事实证明，我粘贴了一些测试代码，在“excludeStories”上设置了一个正则表达式，以过滤掉任何带有“数据”一词的故事函数。当然，我消失的故事被命名为“StoryWithData”，所以被排除在外了。

我花了很长时间才弄清楚这一点，所以在这里发帖以防万一帮助别人。

export default {
  component: Footer,
  title: "App/Footer",
  excludeStories: /.*Data$/,  // -> this will filter out functions named like  "*Data"
}

Answer 4

你应该使用 as

 module.exports = {
  stories: ['../src/**/*.stories.(ts|js|mdx)']
};

基本上处理所有类型的故事。