質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1787閲覧

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

akarin

総合スコア22

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/02/18 03:28

編集2021/02/18 03:44

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

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

作ったコンポーネント

lazySVG.tsx

typescript

1import * as React from "react"; 2 3export interface Props extends React.SVGProps<SVGSVGElement> { 4 src: string; 5} 6 7const LazySVG = React.memo(({ src, ...svgProps }: Props) => { 8 const SVG = React.lazy(() => import(src)); 9 10 return ( 11 <React.Suspense fallback={null}> 12 <SVG {...svgProps} /> 13 </React.Suspense> 14 ); 15}); 16 17export 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

json

1{ 2 "dependencies": { 3 "react": "^16.8.6", 4 "react-dom": "^16.8.6", 5 }, 6 "devDependencies": { 7 "react-svg-loader": "^3.0.3", 8 "ts-loader": "^5.3.3", 9 "typescript": "^3.4.1", 10 "webpack": "^4.29.6", 11 } 12}

webpack.js

javascript

1module.exports = { 2 module: { 3 rules: [ 4 { 5 test: /.tsx?$/, 6 use: { 7 loader: "ts-loader", 8 options: { 9 transpileOnly: true 10 } 11 }, 12 exclude: /node_modules/ 13 }, 14 { 15 test: /.svg$/, 16 use: ["react-svg-loader"] 17 } 18 ] 19 }, 20};

その他補足

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/02/18 03:30

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

2021/02/18 03:41

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

2021/02/18 03:49

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

回答1

0

ベストアンサー

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

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

投稿2021/02/18 03:53

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/02/18 03:59

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

2021/02/18 04:10

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

2021/03/02 01:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問