web-dev-qa-db-fra.com

Storybook: échec de l'exécution de 'createElement' sur les fichiers svg à l'aide de @ svgr / webpack

Mon erreur en premier lieu est exactement la même que celle décrite ici . J'utilise le package @ svgr/webpack pour importer mon .svg fichiers en tant que React comme ça:

import Shop from './icons/shop.svg'

return <Shop />

Cela fonctionne bien sur mon application mais quand j'ai essayé de faire la même chose dans Storybook j'obtiens cette erreur:

Échec de l'exécution de 'createElement' sur 'Document': le nom de la balise fourni ('static/media/shop.61b51e05.svg') n'est pas un nom valide.

J'ai donc ajouté le chargeur dans mon .storybook/main.js pour étendre la configuration par défaut du pack Web Storybook:

// ...
webpackFinal: async config => {    
    config.module.rules.Push({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    });

L'erreur s'est toujours produite, j'ai donc essayé de remplacer le test du livre de contes par défaut pour .svg fichiers comme suggéré dans réponse à la question précédente :

const fileLoaderRule = config.module.rules.find(rule => { rule.test !== undefined ? rule.test.test('.svg') : '' });
fileLoaderRule.exclude = /\.svg$/;

Mais alors j'obtiens cette erreur:

TypeError: impossible de définir la propriété 'exclude' sur undefined

J'ai donc décidé de faire un console.log du rule.test et étrangement les seuls tests par défaut provenant de la configuration de Storybook sont des thèses:

{
  test: /\.md$/,
  ...
}
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  ...
}
{
  test: /\.js$/,
  ...
}
{
  test: /\.(stories|story).mdx$/,
  ...
}
{
  test: /\.mdx$/,
  ...
}
{
  test: /\.(stories|story)\.[tj]sx?$/,
  ...
}
{
  test: /\.(ts|tsx)$/,
  ...
}

Comme vous pouvez le voir, aucun test n'affecte un .svg fichier. Quelqu'un a-t-il une idée pourquoi ma configuration ne fonctionne pas en utilisant:

{
  test: /\.svg$/, 
  enforce: 'pre',
  loader: require.resolve('@svgr/webpack'),
}
javascriptreactjssvgwebpackstorybook
5
johannchopin

Votre rappel find renvoie toujours undefined. Modifiez-le pour renvoyer la valeur booléenne correcte:

const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));

Quoi qu'il en soit, la configuration par défaut du livre d'histoires devrait avoir une règle pour les images avec ce test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/. Donc, votre code (mais avec un rappel de recherche correct) fonctionne bien pour moi.

Finale main.js:

module.exports = {
    stories: ['../src/**/*.stories.[tj]s'],
    webpackFinal: config => { 
        // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
        const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
        fileLoaderRule.exclude = /\.svg$/;  

        config.module.rules.Push({
          test: /\.svg$/,
          enforce: 'pre',
          loader: require.resolve('@svgr/webpack'),
        });

        return config;
    } 
};
1
Max Sinev