svg 파일 import 시 발생하는 에러 핸들링하기

토이 프로젝트에서 사용할 지도 이미지 파일을 Import하는 과정에서 발생한 에러를 해결하는 과정을 포스팅하고자 한다.

---

 

svg 이미지를 import 하는 과정에서 에러가 발생했다.

 

SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

 

네임스페이스 규칙에 어긋나니 throwIfNamespace 설정을 바꾸던지 아니면 규칙에 맞게 수정하던지 하라고 한다.

 

네임스페이스 사례를 찾아보니 카멜케이스 등의 다양한 규칙들이 나왔다.

 

흠... 저 return 되는 부분에서 문제가 생긴건데..

에러 로그를 봐도 svg 파일 내 어느 부분이 정확히 문제인지 파악이 되지 않아 구글링을 하던 도중 비슷한 문제를 발견했다.

 

SyntaxError: unknown: Namespace tags are not supported by default

 

스택오버플로우 글과 내 svg 파일을 비교해보니 속성과 태그가 콜론으로 되어있었다.

 

<svg xmlns="http://www.w3.org/2000/svg" xmlnsAmcharts="http://amcharts.com/ammap" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
	<defs>
		<style type="text/css">
        ...
		</style>

		<amchartsAmmap projection="mercator" leftLongitude="125.384458" topLatitude="38.612296" rightLongitude="131.873029" bottomLatitude="33.194027"></amchartsAmmap>

 

카멜 케이스로 수정해주었더니 해결되었다!

---

<Ref>

https://stackoverflow.com/questions/59820954/syntaxerror-unknown-namespace-tags-are-not-supported-by-default