web-dev-qa-db-fra.com

Comment dépanner le livre de contes qui ne charge pas les histoires?

J'essaye de charger les histoires de démo du livre d'histoires (withText, withIcon), en utilisant ceci guide de réaction , mais je ne parviens pas à exécuter les exemples d'histoires .

Pour éviter tout doute, voici le fichier de code (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>
);

Et mon main.js

module.exports = {
    stories: ['../src/**/*.stories.jsx?'],
};

Quand je cours npm run storybook J'obtiens cette page:

storybookpage with no stories

Voici la sortie de la 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

Ce qui ne montre pas ce qui n'a pas fonctionné.

De même, je ne vois pas ce qui ne va pas avec la configuration sur la ligne de commande

> 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/    │
│                                                    │
╰────────────────────────────────────────────────────╯

La seule option CLI que je peux trouver, qui semble pertinente, est --debug-webpack mais cela ne produit pas de sortie supplémentaire dans mon cas.

Que puis-je faire pour résoudre davantage ce problème?

javascriptreactjsstorybook
3
Pureferret

Le main.js Dans votre dossier ./storybook Contient la ligne stories: ['../src/**/*.stories.jsx?'], Puisque votre histoire est nommée Histogram.stories.js Elle devrait être comme ci-dessous.

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

J'ai essayé de reproduire cela dans mon code en utilisant votre main.js Et la même chose m'est arrivée exactement. L'ajout de ? Comme celui-ci stories: ['../src/**/*.stories.js?'] Donne la même erreur

Edit - vous pouvez vérifier à la fois .js Et .jsx En modifiant la ligne comme ceci stories: ['../src/**/*.stories.js(x)?']

2
Y4glory