React.lazyを使って動的にSVGを読み込みたい

Question

Reactで動的にSVGを読み込む以下のようなコンポーネントを作りました。
react-svg-loaderを使っています。

結果として、ビルドで警告が出てブラウザでエラーが発生し、SVGの表示ができません。
どのようにしたらsrcを動的に決め、SVGを表示できるでしょうか？

作ったコンポーネント

lazySVG.tsx

import * as React from "react";

export interface Props extends React.SVGProps<SVGSVGElement> {
  src: string;
}

const LazySVG = React.memo(({ src, ...svgProps }: Props) => {
  const SVG = React.lazy(() => import(src));

  return (
    <React.Suspense fallback={null}>
      <SVG {...svgProps} />
    </React.Suspense>
  );
});

export default LazySVG;

ビルドで発生する警告

WARNING in ./src/lazySVG.tsx 9:62-75
Critical dependency: the request of a dependency is an expression

ブラウザで発生するエラー

Uncaught Error: Cannot find module './rsrc/hoge.svg'

ビルド環境

package.json

{
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
  },
  "devDependencies": {
    "react-svg-loader": "^3.0.3",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.1",
    "webpack": "^4.29.6",
  }
}

webpack.js

module.exports = {
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            transpileOnly: true
          }
        },
        exclude: /node_modules/
      },
      {
        test: /.svg$/,
        use: ["react-svg-loader"]
      }
    ]
  },
};

その他補足

const SVG = React.lazy(() => import(src));の行で直接パスを書くと正常に動作します。
例：const SVG = React.lazy(() => import("./rsrc/hoge.svg"));

Comments

[maisumakun]

JavaScriptのビルドにはどのようなツールを使っていますか？

[hoshi-takanori]

react-svg-loader　ってビルド時に SVG を読み込んで bundle.js に組み込むもので、ブラウザから動的に読み込むものではないのでは…。

[akarin]

@maisumakun さん
ビルド環境で関係のありそうなところを記載しました。
情報に不足あれば教えてください＞＜

Answer 1

エラーメッセージのとおり、普通に変数を投げる形でのimportはWebpackを通りません。

require.contextを使って、どのファイル群から読み込むかを指定する必要があります（公式）。

Comments

[maisumakun]

なお、読み込まれる可能性のあるファイルはすべてバンドルに含まれることとなります。

[akarin]

ちょっと知識が乏しくてすぐに試せないですが、ドキュメントを読んでやってみます...！
ありがとうございます。

[akarin]

できました。ありがとうございます。