2
votes

Storybook - aucune histoire n'apparaissant dans un projet dactylographié avec webpack / babel personnalisé

J'essaye de mettre en place Storybook dans un projet. Mon projet s'exécute sur react @ ^ 16, et j'utilise dactylographié, avec une configuration personnalisée de babel et de webpack pour le développement et la construction. Pour mettre en place un livre d'histoires, j'ai fait

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.filter'

Cela installe tout le nécessaire. Il place un dossier .storybook dans le dossier racine et un dossier stories dans mon dossier src avec des composants préfabriqués et des histoires au format tsx (ce que je veux):

Le fichier .storybook/main.js semble .storybook/main.js :

Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.

Et le fichier .stories.js moyen installé automatiquement par npx sb init semble également npx sb init :

import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import { Header, HeaderProps } from './Header';

export default {
  title: 'Example/Header',
  component: Header,
} as Meta;

const Template: Story<HeaderProps> = (args) => <Header {...args} />;

export const LoggedIn = Template.bind({});
LoggedIn.args = {
  user: {},
};

export const LoggedOut = Template.bind({});
LoggedOut.args = {};

Mais lorsque je lance le npm run storybook , la page de destination du livre de contes ne contient aucune histoire. Même s'il avait installé des histoires par défaut pour commencer à jouer. Ça dit:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

Comme demandé, voici un lien vers le dépôt afin que vous puissiez creuser un peu plus dans la structure, la configuration du weback, etc. Remarque je n'ai pas encore npx sb init changements d' npx sb init , donc vous ne verrez pas les fichiers là-bas, seulement mon point de départ juste avant d'exécuter le sb init .

Je n'ai eu aucun problème pour faire fonctionner npx sb init avec une application create-react-app standard, mais avec ma version et mon script de webpack personnalisés, il est juste vide. Qu'est-ce qui ne va pas?

Edit: Détails supplémentaires

Je me rends compte que le simple fait d'exécuter npx sb init , puis npm run storybook génère cette erreur:

npx sb init

Sur la base de ce fil , l'installation de core-js@3 résout le problème et le livre de contes s'exécute, mais sans histoires.

reactjs typescript webpack storybook

6 commentaires

Vos fichiers d'histoires exportent-ils réellement des histoires? Je ne demande que parce que je l'ai fait dans le passé par erreur!

Les fichiers .stories.js semblent bien ... J'en ai ajouté un à la question pour clarification. Ce sont les fichiers par défaut apportés par npx sb init , pas même les fichiers d'histoire que j'ai encore écrits moi-même. J'ai littéralement juste fait un npx sb init , puis npm run storybook un npm run storybook un après l'autre, et la configuration par défaut montre un livre de contes vide.

Je pense que npx sb init besoin d'un projet CRA pour fonctionner, essayez de déboguer la configuration du webpack avec npm run storybook --debug-webpack pour obtenir plus de détails sur ce qui est exécuté et le comparer avec celui utilisé dans CRA

Pourriez-vous s'il vous plaît partager un lien GitHub pour ce dépôt, afin que cela puisse être débogué d'une meilleure manière?

J'ai ajouté le lien. Notez que le dépôt n'a pas les fichiers ajoutés à partir de sb init , car je ne les validerai pas tant qu'il ne commencera pas à fonctionner. Imaginez simplement le clonage du npx sb init et l'exécution de npx sb init , et vous serez exactement là où je suis dans le problème.

@diedu l'ajout de l' --debug-webpack ne semble rien faire, aucune différence de sortie dans la console. Il doit y avoir un moyen de combler le fossé entre l'utilisation de npx sb init pour CRA et une version webpacl / babel personnalisée. Qu'est-ce qui pourrait manquer?

3 Réponses :

0
votes

Peut-être que vous avez des problèmes avec le chemin des histoires, essayez de ne sauvegarder que "../src/**/*.stories.js" dans votre configuration pour voir si c'est la raison

  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ]

2 commentaires

Je ne suis pas sûr de ce que vous suggérez ici. La propriété des stories dans votre réponse est identique aux stories de ma question. Proposez-vous de supprimer les addons ? J'ai essayé cela et cela me donne des erreurs de ne pas savoir comment traiter .svgs.

Je pense que vous pouvez essayer de changer le chemin des histoires, par exemple vérifier s'il peut obtenir des histoires à partir du chemin plus simple comme "stories": ["../src/**/*.stories.js"]

1
votes

Il semble que le plugin babel transform-es2015-modules-amd ne corresponde pas au storybook puisque sb utilise toujours votre configuration babel.

Vous devrez peut-être le supprimer, puis cela fonctionnerait:

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

Si vous voulez avoir une configuration babel spéciale pour le livre de contes, placez-le .storybook/.babelrc sorte que la configuration soit simple comme ceci:

.storybook/.babelrc :

{
  "plugins": [
     // "transform-es2015-modules-amd", // Remove this plugin
   ]
}

REMARQUE: vous pourriez manquer d'oublier install @babel/preset-typescript pour vous aider à transformer votre code dactylographié.

7 commentaires

C'était ça. Je l'ai essayé dans les deux sens, dans les deux sens. Je ne sais pas pourquoi j'avais besoin du transform-es2015-modules-amd , car mon projet se construit toujours sans lui. Merci! Comment avez-vous identifié cela?

Welp, maintenant j'ai un nouveau problème. Puisque vous êtes au courant de cela, vous pouvez peut-être aider. Lorsque j'essaie de créer une histoire à partir de mes composants, j'obtiens l'erreur: Module not found: Error: Can't resolve 'esri/Basemap' in '/.../GitHub/20-maps/src/components/chapters/protests_us' . Pourquoi Storybook ne sait-il pas rechercher les modules de nœuds dans le dossier node_modules ? J'ai fait quelques recherches et certaines personnes ont recommandé d' ajouter une resolve à la configuration du pack Web, mais je l'ai déjà dans ma configuration.

Je ne sais pas si je vous comprends bien car node_modules est censé être résolu correctement. De plus, la configuration de votre webpack n'est pas liée à celle du livre d'histoires (il a sa propre configuration mais vous pouvez la personnaliser). Pouvez-vous envoyer votre modification au repo afin que je puisse vérifier pour vous?

les changements sont poussés, avec tous les fichiers du livre de contes et tout. merci beaucoup d'avoir regardé ça

J'ai vérifié à nouveau votre repo. Malheureusement, je n'ai pas pu voir où votre package esri répertorié dans package.json . Vous avez manqué de l'installer?

Ainsi, tous les modules esri/X proviennent de l' arcgis-js-api , qui est automatiquement installé lorsque vous installez @arcgis/webpack-plugin , qui se trouve dans mon package.json. La configuration webpack du projet utilise le plugin arcgis webpack, qui indique au projet de rechercher tous les modules esri/ dans le arcgis-js-api . Dois-je ajouter cela à la configuration du webpack du livre d'histoire? Il semble que Storybook essaie de rechercher des modules de nœuds dans le même dossier que le fichier qui les importe cependant ...

Je vous ai laissé un autre indice pour traiter arcgis-js-api comme une nouvelle réponse car il a quelques étapes à suivre

1
votes

En cas de gestion d' arcgis-js-api dans sb , vous devez déclarer @arcgis/webpack-plugin dans la configuration du webpack de storybook en ajoutant à sa configuration.

Voici quelques étapes à suivre:

Ajoutez la propriété webpackFinal dans .storybook/main.js avec le contenu suivant:

// Install
npm i -D  @storybook/preset-scss css-loader sass-loader style-loader


// Add to your current addons
{
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
}

Une dernière chose à savoir, certains composants importent des fichiers scss , vous devrez donc peut-être le prendre en charge en ajoutant un addon scss '@storybook/preset-scss'

const ArcGISPlugin = require('@arcgis/webpack-plugin');

module.exports = {
    // ...
    webpackFinal: (config) => {
        // Add your plugin
        config.plugins.push(
            new ArcGISPlugin(),
        );
        
        // Since this package has used some node's API so you might have to stop using it as client side
        config.node = {
            ...config.node,
            process: false,
            fs: "empty"
        };

        return config;
    }
};

1 commentaires

Mec, tu es incroyable. Cela a fonctionné. Merci beaucoup!