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

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

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

Answer 2

将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）-截至今天，在安装 storybooknpx 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 3

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