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

How to troubleshoot storybook not loading stories?

提问人:AncientSwordRage 提问时间:4/3/2020 最后编辑:AncientSwordRage 更新时间:2/13/2023 访问量:80099

问:

我正在尝试使用此反应指南加载演示故事书故事(,),但我无法运行任何示例故事。withTextwithIcon

为避免疑义,以下是代码文件(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

storybookpage with no stories

这是 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

我该怎么做才能进一步解决此问题?

JavaScript ReactJS 故事书

评论

0赞 Y4glory 4/6/2020
嘿,你是在这个项目中使用了 create-react-app 还是你自己做的?
0赞 AncientSwordRage 4/7/2020
@Y4glory我做了这个mysef,但我从同事那里复制了一些配置
0赞 Y4glory 4/7/2020
你能给我一个项目结构的样本吗?
0赞 AncientSwordRage 4/7/2020
@Y4glory这是一个非常扁平的结构,但我不能把它放在任何地方。它只是 和 ,在我拥有的基础水平上,其他一切都像 or 等等。src/components/Histogram.jssrc/components/Histogram.stories.js.babelrc.gitignore.eslintrc
0赞 Y4glory 4/7/2020
你能检查你的文件夹以确保你有这一行吗?main.js.storybookstories: ['../src/**/*.stories.js'],

答:

32赞 Y4glory 4/8/2020 #1

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

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

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

编辑 - 您可以同时检查两者,并像这样修改行.js.jsxstories: ['../src/**/*.stories.js(x)?']

编辑 (24/7/2021) - 截至今天,在安装故事书并选择 react 作为模板时,它会自动在主 .js 文件中添加以下代码片段npx sb init

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

它解决了这个问题

评论

0赞 Ritika Gupta 7/2/2021
嗨,我的故事书文件夹中没有主.js文件。那我该怎么办?
0赞 Y4glory 7/24/2021
@RitikaGupta你是如何设置你的项目的?我假设您使用了 create-react-app,然后使用 npx sb init 添加了故事书
0赞 DarkTrick 11/7/2022
@AncientSwordRage 这是如何被接受的答案?问题说如何解决故事书不加载故事的问题。此答案无助于进行一般故障排除,而是解决一个特定的用例。
2赞 mrjbj 8/22/2020 #2

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

我花了很长时间才弄清楚这一点,所以在这里发帖以防万一对其他人有帮助。

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

评论

3赞 Gert Hengeveld 1/6/2021
建议的设置是 use 而不是 excludeStories。这会将任何以大写字母开头的导出视为故事,这很好,因为它强制执行了故事的 PascalCase 命名约定。includeStories: /^[A-Z]/
3赞 Jkarttunen 1/4/2021 #3

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

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

评论

0赞 Jurosh 7/5/2021
哦,谢谢,这使我免于调试问题数小时。有趣的是,代码失败了,但故事书只显示警告。完整构建成功没有问题,如果有失败的故事,我希望故事书会失败构建:o
-1赞 Dinesh Pahuja 5/5/2021 #4

您应该用作

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

基本上处理所有类型的存储。

评论

4赞 AncientSwordRage 5/5/2021
这不能处理.jsx
20赞 Aakash 3/7/2022 #5

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

-1赞 devbiswasnegi 4/11/2022 #6

您应该运行 storybook 服务器,然后在运行 react native 应用程序后,如果您刷新 react native server 的网页,则应该加载故事。

评论

0赞 AncientSwordRage 4/11/2022
这如何回答具体问题?
9赞 Shane Walker 8/18/2022 #7

检查运行 localhost 的 chrome 窗口的控制台。您应该在那里看到错误。我有一个组件没有出现,但项目运行顺利,我花了一点时间弄清楚是什么错误以及它在哪里出现

评论

0赞 Linden Wells 9/20/2023
谢谢。我在 Component.test.tsx 中定义和导出存储状态,然后从 Component.stories.tsx 导入它,我的控制台发出警告,说它不知道“describe”是什么。describe 只是在 jest 测试中用于构建它们。您不必导入 describe,因此必须以某种方式处理它,但仅适用于测试文件。我的解决方案是在 Component.data.tsx 中定义和导出存储状态,然后在 Component.stories.tsx 和 Component.test.tsx 中导入该状态。
2赞 Atilla Baspinar 10/30/2022 #8

就我而言,我必须清除浏览器的本地存储。在 localhost:6006 上运行了一个较旧的故事书应用程序

2赞 Danko Kozar 2/13/2023 #9

还有另一种情况是,有些故事无法加载(我花了一段时间才弄清楚这一点)。

当您的故事路径是另一个故事路径的子字符串时,两个故事都不会加载(静默失败)。

例如:

路径 1:foo/bar

路径 2:foo/bar/baz

这是因为 Storybook 似乎只考虑为树的叶子节点渲染故事。在上面的例子中,the 不是叶节点,这让 Storybook 感到困惑,所以它放弃了一切(整个子树)。foo/bar

我还怀疑我的故事没有呈现,因为深度是深度的,但似乎任何深度的故事都是允许的:

foo1/foo2/foo3/foo4/foo5/foo6...->完全有效的故事路径。