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

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

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

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

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

Answer 2

我遇到了同样的问题，即“故事未显示在故事书UI中”。原来，我已经粘贴了一些测试代码，这些代码在“ excludeStories”上设置了regEx，以过滤掉其中带有“数据”一词的所有故事功能。当然，我消失的故事被命名为“ StoryWithData”，因此被排除在外。

这花了我很长时间才弄清楚这一点，因此在这里发帖以防他人。

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

Answer 3

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

start-storybook 似乎无声无息地失败了。但是您可以通过重新保存文件来排查错误。

Answer 4

你应该用作

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

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

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

4 个答案: