[JSX.IntrinsicElements 에러] VSCode App.tsx 왜 다 빨간줄이야?

에러 배경

npm init vite를 통해 react와 typescript로 프로젝트를 시작하려고 했다.

에러 그 잡채

App.tsx의 기본 코드를 보기 위해서 창을 띄웠는데 HTML의 기본 태그에 전부 빨간 줄이 있었다. 모든 HTML 태그에는 다음과 같은 에러 메시지가 출력되고 있었다.

Error
'JSX.IntrinsicElements' 형식에 'a' 속성이 없습니다.ts(2339)

 

또 다른 에러는 확장자를 인식하지 못하는 듯 보였다.

Error
가져오기 경로는 '.tsx' 확장으로 끝날 수 없습니다. 대신 './App.js' 가져오기를 고려하세요.ts(2691)

해결 과정

해결. VSCode 최신 버전 재설치

오래된 버전의 VSCode는 TS의 최신 bundler를 이해하지 못해서 문제가 발생한다고 한다.

자세한 내용과 에러 사진은 다음 글에서 볼 수 있다.

'JSX.IntrinsicElements' problem:RESOLVED

 

🍯tip! 추가적으로 VSCode를 설치하면 사진과 같은 경고 문구가 뜬다. VSCode는 User 설치와 System 설치로 나뉜다. User 설치로 진행하면 현재 윈도우 계정별로 환경이 유지되고, System으로 설치가 되면 컴퓨터에서 사용되는 모든 윈도우 계정에서 동일한 환경이 유지된다.

 

실패 1. package 버전 최신으로 업데이트하기

package.json에 적힌 패키지 중 최신 버전이 아닌 패키지들의 버전을 올려보았지만 큰 의미는 없었다.

 

실패 2. 설치된 node_modules 폴더 삭제 및 `npm i` 명령어 재실행

패키지가 잘 설치되었는지가 의문이 들어 node_modules 폴더를 삭제했다가 다시 `npm i`를 통해 다시 설치했지만 달라지는 건 없었다.

정리

에러의 원인을 알고 나니 사용하는 툴들의 버전도 잘 관리해야겠다는 생각이 들었다.