6
votes

Diffusion de fichiers statiques dans "storybook js"

J'utilise la documentation du livre de contes et je n'ai pas pu charger les images du dossier des ressources. Comme le dit la documentation: "si vous utilisez une configuration Webpack personnalisée, vous devez ajouter le chargeur de fichiers dans votre configuration Webpack personnalisée" - et mon fichier webpack.config ressemble à:

"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"

package.json:

const path = require('path');


 module.exports = ({ config }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
 config.module.rules.push({
   test: /\.(ts|tsx)$/,
   use: [
     {
       loader: require.resolve('awesome-typescript-loader'),
     },
   ],
 });
 config.module.rules.push({
   test: /\.(svg|png|jpe?g|gif)$/i,
   use: [
     {
       loader: 'file-loader',
     },
    ]
  },);

  config.resolve.extensions.push('.ts', '.tsx')


  return config;
};

C'est après le livre d'histoires de fil

semble que quelque chose manque dans la documentation des livres d'histoires, ou je fais quelque chose de mal:? merci à tous ceux qui peuvent m'aider avec ce problème. ^ _ ^

reactjs typescript webpack storybook

1 commentaires

J'ai corrigé l'erreur en ajoutant le fichier custom.d.ts avec le code ci-dessous: declare module "* .svg" {const content: any; exporter le contenu par défaut; } L'erreur a disparu, mais l'icône ne s'affiche toujours pas: / des idées?

3 Réponses :

4
votes

Si quelqu'un rencontre le même problème, essayez le code ci-dessous (j'utilise: storybook, react - sans créer une application de réaction, dactylographié):

Le premier problème concernait le dactylographie et voici ce qui a fonctionné pour moi: j'ai créé le fichier custom.d.ts dans le dossier racine et mis ce code à l'intérieur:

const path = require('path');

module.exports = ({ config }) => {

  config.module.rules = config.module.rules.map( data => {
    // This overrides default svg rouls of storybook, and after that we can use 
   //svg-inline-loader.
    if (/svg\|/.test( String( data.test ) ))
      data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani) 
 (\?.*)?$/;
    return data;
  });

    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      });
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('awesome-typescript-loader'),
        },
      ],
    });
    config.module.rules.push({
      test: /\.svg$/,
      include: path.resolve(__dirname, '../'),
      loader: 'svg-inline-loader'
    });

    config.resolve.extensions.push('.ts', '.tsx')
    return config;
};

Ensuite, j'ajoute ce fichier dans tsconfig.json comme ceci:

"files": [
  "./custom.d.ts"
],

Après cela, l'erreur - "Impossible de trouver imageName.svg" a disparu, mais svg-inline-react n'a toujours pas montré l'icône, maintenant le problème était dans le fichier 'webpack.config.js', le code corrigé est écrit ci-dessous.

declare module "*.svg" {
  const content: string;
  export default content;
}

declare module "svg-inline-react"

^ _ ^

0 commentaires

4
votes

La configuration du dossier statique dans le script de démarrage du livre d'histoire a fonctionné pour moi:

Documentation: fichiers statiques via répertoire

Vous pouvez également configurer un répertoire (ou une liste de répertoires) pour rechercher du contenu statique lorsque vous démarrez Storybook. Vous pouvez le faire avec l'indicateur -s.

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public -p 9001"
  }
}

Bonne chance...

5 commentaires

Ça ne marche pas pour moi. J'ai un projet CRA avec un chargeur de fichiers: Erreur: .... png ne fait pas partie du projet src / director

@ Luke359, vous devrez peut-être suivre la documentation de create-react-app pour leur recommandation concernant les fichiers statiques.

Merci pour le commentaire. J'ai déjà essayé ce gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c Étape par étape, pas d'erreurs, sauf pour cette image damnée

@ Luke359, vous pouvez cloner ce référentiel github.com/appsparkler/reacts . Allez dans la branche luke / storybook , faites une yarn install yarn start et yarn start . Il existe une histoire d'image et vous pouvez vérifier l'image rendue à partir du dossier public.

Merci pour ça. En fait, j'ai trouvé le problème, les chemins d'importation importaient de localhost / public mais la construction ne contenait que le contenu du dossier public, donc pour accéder à public / images, je n'avais qu'à écrire des images

1
votes

Pour résoudre ce problème:

J'ai la structure de dossiers suivante ðŸ '‡ ðŸ ¼

"storybook": "start-storybook -s ./ -p 9001"

Et mon dossier images se trouve dans src/resources/images/my_image.jpg

J'ai corrigé cela en ajoutant le -s ./ partir de ce qui suit ðŸ '‡ ðŸ ¼

# root_folder

.storybook/
src/
package.json
...
...

J'espère que ça aide :) ðŸ'ƒðŸ »

1 commentaires

Merci pour votre temps. Mais j'ai déjà résolu ce problème et j'ai écrit la réponse moi-même, ci-dessus. Merci encore une fois.