[Error] InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/~~.svg ') is not a valid name.

문제의 코드

---

📂src > assets > profileImages > index.js

export { default as ImageProfile1 } from "./Upstream-1.svg";
export { default as ImageProfile2 } from "./Upstream-2.svg";
export { default as ImageProfile3 } from "./Upstream-3.svg";
export { default as ImageProfile4 } from "./Upstream-4.svg";
export { default as ImageProfile5 } from "./Upstream-5.svg";
export { default as ImageProfile6 } from "./Upstream-6.svg";
export { default as ImageProfile7 } from "./Upstream-7.svg";
export { default as ImageProfile8 } from "./Upstream-8.svg";
export { default as ImageProfile9 } from "./Upstream-9.svg";
export { default as ImageProfile10 } from "./Upstream-10.svg";
export { default as ImageProfile11 } from "./Upstream-11.svg";
export { default as ImageProfile12 } from "./Upstream.svg";

해결

---

간단하다 default 를 ReactComponent 로 바꿔주면 된다.

하지만 저 svg 들은 이미 여러 곳에서 쓰이고 있었는데.. ReactComponent로 바꿔주니까 다른 페이지에서는 엑박이 뜨는 문제가 발생했다.
그래서 📂profileImages 폴더(같은 폴더)에 import.js 라는 새로운 파일을 만든 뒤 ReactComponent 로 export 해주었다

export { ReactComponent as ImageProfile1 } from "./Upstream-1.svg";
export { ReactComponent as ImageProfile2 } from "./Upstream-2.svg";
export { ReactComponent as ImageProfile3 } from "./Upstream-3.svg";
export { ReactComponent as ImageProfile4 } from "./Upstream-4.svg";
export { ReactComponent as ImageProfile5 } from "./Upstream-5.svg";
export { ReactComponent as ImageProfile6 } from "./Upstream-6.svg";
export { ReactComponent as ImageProfile7 } from "./Upstream-7.svg";
export { ReactComponent as ImageProfile8 } from "./Upstream-8.svg";
export { ReactComponent as ImageProfile9 } from "./Upstream-9.svg";
export { ReactComponent as ImageProfile10 } from "./Upstream-10.svg";
export { ReactComponent as ImageProfile11 } from "./Upstream-11.svg";
export { ReactComponent as ImageProfile12 } from "./Upstream.svg";