npm 배포 에러

문제 1

• 코드를 작성하고 배포하기전에 빌드를 해줬는데 에러가 발생했다.

 

 

문제1 원인

• svg의 타입이 지정되지 않아 에러 발생

https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript

Unable to import svg files in typescript

 

문제1 해결

• 아래와 같이 src 폴더 내부에 custom.d.ts의 파일을 만들어 svg의 타입을 정의해줬다.

 

 

문제2

• 빌드와 배포는 성공했고 테스트를 해보고자 다른 프로젝트에서 install 후 사용하여 로컬로 브라우저를 열어봤더니 svg가 사용된 컴포넌트에서 에러가 발생했다.

 

문제2 원인

원인을 찾지 못하던 중 tsc와 vite의 그냥 빌드와 차이점이 뭘까? 생각을 해보고 바로 vite의 build를 실행해 봤더니 파일의 구조도 달랐지만 눈에 띄었던 것은 assets의 폴더가 따로 존재한다는 것이었다. 그래서 검색해봤더니 tsc는 타입스크립트파일만 컴파일 및 빌드하기 때문에 assets 폴더의 svg가 포함되지 않았던 것! 

• tsc로 빌드한 폴더에 assets폴더가 포함되지 않아 에러가 발생했다.

https://vccolombo.github.io/blog/tsc-how-to-copy-non-typescript-files-when-building/

tsc: How to copy non-TypeScript files when building

문제2 해결

• tsc로 컴파일 및 빌드한 다음 assets 폴더를 복사해서 빌드한 폴더 안에 넣어주었다.

 

 

여담

그럼 왜 vite의 빌드 말고 tsc를 사용하는 걸까?

예상은 브라우저 목적이 아닌 라이브러리 목적이기 때문이라고 생각했다. 하지만 검색을 해봤더니 vite는 컴파일하여 파일 변환하는 작업과 타입 체크를 분리시켜 속도를 증가시켰다는 내용이 공식문서에 있었다.( 그럼 vite의 빌드가 더 좋은거 아닌가? )

 

지금은 배포하는데 참고한 블로그에서는 CRA를 사용해서 tsc를 사용했다고 생각하고 있다. 다음에 리팩토링 또는 새로운 프로젝트를 진행할 경우 vite의 build로 해봐야겠다.

 

https://ko.vitejs.dev/guide/features.html#typescript

Vite