web-dev-qa-db-ja.com

React StorybookSVGは「ドキュメント」で「createElement」を実行できませんでした

Storybookを既存のReactアプリに追加しようとしていますが、インポートされたsvgファイルでエラーが発生します。svgはインポートされ、次のように使用されます。

import Border from './images/border.inline.svg'
...
<Border className="card__border" />

これは、アプリを実行してビルドすると機能しますが、ストーリーブックでエラーが発生します。どうして？


Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.

デフォルトのwebpack.config.jsには次のものがあります。

  ...
  {
    test: /\.inline.svg$/,
    loader: 'svg-react-loader'
  },
  ...

また、既存のコードはwebpack 3を使用しており、StorybookV4を使用しています。

reactjswebpackstorybook
6
Mark Robson

私はそれを動作させました

...
module.exports = {
  module: {
    rules: [
      {
        test: /\.inline.svg$/,
        loader: 'svg-react-loader'
      }
    ]
  }
}
0
Mark Robson