Как устранить неполадки в сборнике рассказов, не загружая истории? - PullRequest
2 голосов
/ 03 апреля 2020

Я пытаюсь загрузить демонстрационные истории (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, но это не приводит к дальнейшему выводу в моем случае.

Что я могу сделать для дальнейшего устранения этой проблемы?

1 Ответ

1 голос
/ 08 апреля 2020

main.js в вашей папке ./storybook содержит строку stories: ['../src/**/*.stories.jsx?'],, поскольку ваша история называется Histogram.stories.js, она должна быть такой, как показано ниже.

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

Я попытался повторить это в своем коде с помощью используя ваш main.js, и со мной тоже самое произошло. Кроме того, добавление ?, как это stories: ['../src/**/*.stories.js?'] дает ту же ошибку

Edit - вы можете проверить оба значения .js и .jsx, изменив строку, подобную этой stories: ['../src/**/*.stories.js(x)?']

...