web-dev-qa-db-ja.com

ストーリーブックがストーリーを読み込まない場合のトラブルシューティング方法は？

これを使用して、デモのストーリーブックストーリー（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を実行すると、次のページが表示されます。

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ですが、私の場合はこれ以上の出力は生成されません。

この問題をさらにトラブルシューティングするにはどうすればよいですか？

javascriptreactjsstorybook
3
Pureferret

ストーリーの名前は_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)?']

2
Y4glory