web-dev-qa-db-ja.com

ストーリーブック：@ svgr / webpackを使用してSVGファイルで 'createElement'を実行できませんでした

そもそも私のエラーは、説明したエラーとまったく同じです here@ svgr/webpack パッケージを使用して、.svgファイルをReactコンポーネントとしてインポートします。

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

return <Shop />

私のアプリでは問題なく動作しますが、 Storybook で同じことを実行しようとすると、次のエラーが発生します。

'Document'で 'createElement'を実行できませんでした：指定されたタグ名（ 'static/media/shop.61b51e05.svg'）は有効な名前ではありません。

ローダーを.storybook/main.jsファイルに追加して、デフォルトのStorybook Webpack構成を拡張します。

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

エラーは引き続き発生したため、 前の質問の回答 で提案されているように、.svgファイルのデフォルトのストーリーブックテストを上書きしようとしました。

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

しかし、それから私はこのエラーを受け取ります：

TypeError：未定義のプロパティ 'exclude'を設定できません

そのため、console.logのrule.testを作成することにしました。奇妙なことに、Storybookの構成から取得されるデフォルトのテストは以下のものだけです。

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

ご覧のとおり、.svgファイルに影響するテストはありません。だから誰かが私の設定がなぜ使っていないのか考えていますか：

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

findコールバックは常にundefinedを返します。正しいブール値を返すように変更します。

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

とにかく、ストーリーブックのデフォルトの設定には、このテストでの画像のルールが必要です：/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/。したがって、あなたのコード（ただし、正しいfindコールバックを使用）は私にとってはうまく機能します。

最終_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