ERROR 🚨 Cannot find module image file(svg, png)

리액트를 사용하다가 정말 뜬금없는 에러가 발생하였다.

이제까지 잘 읽고 있었잖아. 왜 갑자기 없다는 거여? 원인은 아직까지 모르겠지만 해결책은 찾았다.

방법

src 안에 custom.d.ts를 만든다. (자바스크립트 프로젝트라면 .js로 만든다)

declare module '*.svg' {
    const content: any;
    export default content;
}

declare module "*.png" {
    const value: any;
    export = value;
}

추가하면 제대로 인식된다.

문제는 svg 사용하는 방식이 바뀐다는 것이다. 원래는 {ReactComponent as Siren} 이렇게 작성했는데 저 파일을 추가한 뒤로 컴포넌트를 인식하지 못한다.

import Siren from "../../assets/images/button/siren.svg";

const StyledSiren = styled.button`
  width: 24px;
  height: 24px;
  background-image: url(${Siren});
  background-size: contain;
  background-repeat: no-repeat;
`;

background-image url이나 img content로 설정하여 사용한다.

만약 컴포넌트로 사용하고 싶다면 다음과 같이 변경한다.

declare module '*.svg' {
    import { ReactElement, SVGProps } from "react";
    const content: (props: SVGProps<SVGElement>) => ReactElement;
    export default content;
}

🚨 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided 

이렇게 하면 또 에러가 날 것이다. 이럴 때는 svg를 컴포넌트로 만들어서 사용하면 된다.

import React from "react";

const Logo = props =>
  <svg > 
.... svg code
  </svg>;

export default Logo;

이게 귀찮으면 svgr을 사용하면 된다.