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

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 我得到这个页面：

这是开发控制台中的输出：

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?'] 会产生相同的错误

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

编辑（24/7/2021）- 从今天开始，在使用 npx sb init 安装故事书并选择 React 作为模板时，它会自动在 main.js 文件中添加以下代码片段

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

解决了这个问题

Answer 2

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

我花了很长时间才弄明白，所以在这里发帖以防对其他人有所帮助。

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

Answer 3

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

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

Answer 4

你应该使用 as

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

基本上能应付所有类型的故事。

Answer 5

删除 node_modules/.cache/storybook 文件夹并重新启动 Storybook 对我有用。

Answer 6

您应该运行故事书服务器，然后在运行 React Native 应用程序之后，如果您刷新 React Native 服务器的网页，故事应该加载。

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

How to troubleshoot storybook not loading stories?

javascript

reactjs

storybook