[Typescript] main.jsx를 main.tsx로 변경 시 에러

문제

나만의 책장 만들기 프로젝트를 타입스크립트를 배워 마이그레이션 해보려고 했습니다.

모든 파일의 확장자 명을 .tsx로 변경 npm run dev를 실행하여 확인하려 했습니다.

[vite] Pre-transform error: Failed to load url /src/main.jsx (resolved id: /src/main.jsx). Does the file exist?

하지만 해당 오류가 발생하여 제대로 렌더되지 않았습니다.

해결

스택오버플로우의 해당 글을 참고하여, index.html의

<script type="module" src="/src/main.jsx"></script>

부분의 main.jsx를 main.tsx로 변경해주었습니다.

또 다른 문제

아예 오류를 뱉는 현상은 사라졌지만 페이지는 흰 화면만 띄우고 있어, 콘솔창을 확인했습니다.

해결

문제는 vite와 typescript를 함께 사용하는 상황에서, 제가 tsc -w 명령어로 ts 파일을 js 파일로 자동 컴파일 해주도록 했던 부분입니다.

Vite는 자체적으로 esbuild를 사용해서 Typescript를 처리하기 때문에, 별도의 tsc 컴파일이 필요하지 않습니다. 때문에 제가 자동 컴파일을 함으로써 Vite가 혼란스러워 했던 것이죠.

결과적으로 새로 생성된 js 파일들을 다 삭제하고 나니 제대로 렌더되는 것을 확인할 수 있었습니다.