node.js - react-redux MERN アプリケーションで SVG をインポートするときにエラーが発生しました

Question

MERN ボイラープレート プロジェクトの反応コンポーネントに .svg ファイルをロードする必要があります。webpack.config.dev.js のこのエントリでwebpack url-loader を設定しました:

{
 test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.otf$|\.ttf$/i,
 loader: 'url-loader?limit=10000',
}

そして、私は次のようにコンポーネント内のリソースにアクセスしようとします:

import logo from '../../../../assets/logo_h.svg'

しかし、 npm startを起動するとこのエラーが発生しました

SyntaxError: : Unexpected token (1:1)
> 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    |  ^

Answer 1

<?xml ...SVG の上部にあるを削除する必要があります。SVG をレンダリングする必要はなく、解析しようとすると webpack でエラーがスローされることがよくあります。