[Vite + TS] Vite에서 svg 파일을 못 읽을 때(@svgr/rollup 사용)

지금까지는 Webpack(Create-react-app) 환경에서 TypeScript를 실행했었기에 custom.d.ts(혹은 global.d.ts)에서

declare module "*.svg" {
  import React = require("react");

  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

위와 같이 작성하면 svg 파일이 잘 실행이 되었었다.

 

---

그런데 이번에 새로 프로젝트를 할 때 아래와 같이 svg 파일을 사용하려고 했는데,

 

import { ReactComponent as ~~~Icon} from '../../ ........생략'  

 

위와 같이 ReactComponent로 불러올려고 했는데 svg 타입을 찾을 수 없다고 자꾸 오류가 뜨는 것이었다.

내가 설정을 잘못했나싶어서 자꾸 찾아봤지만, 저번의 설정과 딱히 다른 점을 찾아볼 수는 없었다.

 

그러다가 혹시 Create-React-App이 아닌 Vite를 사용하면 타입 설정을 따로 해줘야하나? 하는 의문이 머리에 스치게 되었고, 구글에 검색을 해보니 그 생각이 사실임을 알게 되었다.

 

그리고 구글에 검색하면 뜨는 방법들로 설정을 해주었다.

vite-plugin-svgr을 설치하고, vite.config.ts의 plugins에서 svgr()을 설치해주었다.

하지만 오류는 여전히 해결되지 않았다. 구글의 다른 글들을 살펴봐서 따로 적용을 해주어도 마찬가지였다.

 

왜 그러지하는 의문을 가지고 계속 검색을 하다가 stackoverflow의 글 하나를 보게 되었는데, 지금까지 본 글들의 방법과는 다른 신박한 방법을 제시했다. 바로 npm 에서 @svgr/rollup을 설치한 뒤 적용하라는 것이었다.

 

@svgr/rollup을 설치해보라는 stackoverflow 게시글

 

링크: https://stackoverflow.com/questions/70309561/unable-to-import-svg-with-vite-as-reactcomponent

Unable to import SVG with Vite as ReactComponent

 

@svgr/rollup을 설치한 뒤에 설정을 적용해보니 Typescript가 svg 파일을 별 문제없이 읽을 수 있었다!

(왜 vite-plugin-svgr은 적용이 안되었을까? 아직도 그 이유가 궁금하다.)