提问人:AncientSwordRage 提问时间:4/3/2020 最后编辑:AncientSwordRage 更新时间:2/13/2023 访问量:80099
如何解决故事书无法加载故事的问题?
How to troubleshoot storybook not loading stories?
问:
我正在尝试使用此反应指南加载演示故事书故事(,),但我无法运行任何示例故事。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
我该怎么做才能进一步解决此问题?
答:
“在您的文件夹中”包含该行,因为您的故事已命名,因此它应该如下所示。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)?']
编辑 (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"
]
}
它解决了这个问题
评论
我遇到了同样的问题,即“故事没有出现在故事书 UI 中”,这让我来到这里。事实证明,我粘贴了一些测试代码,这些代码在“excludeStories”上设置了一个正则表达式,以过滤掉任何带有“Data”一词的故事函数。当然,我消失的故事被命名为“StoryWithData”,所以它被排除在外。
我花了很长时间才弄清楚这一点,所以在这里发帖以防万一对其他人有帮助。
export default {
component: Footer,
title: "App/Footer",
excludeStories: /.*Data$/, // -> this will filter out functions named like "*Data"
}
评论
includeStories: /^[A-Z]/
重新保存保存故事文件。 它使组件重新出现在侧面板中,然后您可以看到错误。
start-storybook
似乎无声无息地失败了。但是您可以通过逐个重新保存文件来排查错误。
评论
您应该用作
module.exports = {
stories: ['../src/**/*.stories.(ts|js|mdx)']
};
基本上处理所有类型的存储。
评论
.jsx
删除文件夹并重新启动 Storybook 对我有用。node_modules/.cache/storybook
您应该运行 storybook 服务器,然后在运行 react native 应用程序后,如果您刷新 react native server 的网页,则应该加载故事。
评论
检查运行 localhost 的 chrome 窗口的控制台。您应该在那里看到错误。我有一个组件没有出现,但项目运行顺利,我花了一点时间弄清楚是什么错误以及它在哪里出现
评论
就我而言,我必须清除浏览器的本地存储。在 localhost:6006 上运行了一个较旧的故事书应用程序
还有另一种情况是,有些故事无法加载(我花了一段时间才弄清楚这一点)。
当您的故事路径是另一个故事路径的子字符串时,两个故事都不会加载(静默失败)。
例如:
路径 1:foo/bar
路径 2:foo/bar/baz
这是因为 Storybook 似乎只考虑为树的叶子节点渲染故事。在上面的例子中,the 不是叶节点,这让 Storybook 感到困惑,所以它放弃了一切(整个子树)。foo/bar
我还怀疑我的故事没有呈现,因为深度是深度的,但似乎任何深度的故事都是允许的:
foo1/foo2/foo3/foo4/foo5/foo6...
->完全有效的故事路径。
评论
src/components/Histogram.js
src/components/Histogram.stories.js
.babelrc
.gitignore
.eslintrc
main.js
.storybook
stories: ['../src/**/*.stories.js'],