SVGファイルをReactで表示する際に発生したエラーとその対処法

発生したエラー

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

原因

このエラーは以下の2つの要因が組み合わさった結果として発生する。

1. ReactのJSXはXMLの名前空間（コロン付きタグ）をサポートしていない
2. SVGファイルをReactコンポーネントに変換するSVGRが、一部の名前空間タグには対応しているが、すべてではない

具体的には、以下のように名前空間がキャメルケースに変換される。

• xmlns:xlink → 自動的にxmlnsXlinkに変換される
• xml:space → 自動的にxmlSpaceに変換される
• xmlns:svg → 変換されない

対処法

SVGファイルを任意のテキストエディタで開き、問題の名前空間タグ（特に xmlns:svg）を手動でキャメルケースに変更する。

sample.svg

<!-- 変更前 -->
<svg xmlns:svg="http://www.w3.org/2000/svg">
    
<!-- 変更後 -->
<svg xmlnsSvg="http://www.w3.org/2000/svg">

深掘り

SVGRは内部で名前空間とキャメルケースのマッピングテーブルを持っており、多くの一般的な名前空間タグを自動的に変換している。しかし、xmlns:svgはこのマッピングに含まれていないため、このタグが SVG ファイルに含まれていると変換に失敗してエラーが発生する。

参考