VScode에서 TS가 설치된 프로젝트를 열었을 때, 자주 "모듈 또는 해당형식을 찾을 수 없습니다....(Cannot fine module...)"의 오류를 자주 볼 수 있다.

Vue3 프로젝트에 TS를 추가하였을 때, 바로 이러한 오류가 났는데 해결법을 적어본다.

프로젝트를 바로 생성했을 경우, 보통 vite.config.ts, tsconfig.node.json, tsconfig.app.json, App.vue 에서 확인된다.

실제 설치된 TS플러그인과 VScode에서 기본으로 제공하는 플러그인이 충돌하여 나는 오류인데, 실제 npm 혹은 pnpm install이나 build는 잘 되는데 붉은 밑줄 등으로 문법적 오류처럼 표기된다면, 아래와 같은 방법으로 해결된다.(install이나 build가 안된다면 실제 코드상의 이유일 것이다.)

🛠 컴파일러 옵션 변경하기

컴파일러가 모듈를 읽어오는 곳을 node로 변경해주면 된다.

tsconfig.app.json 파일의 compilerOptions 아래에 "moduleResolution": "node"를 추가해주면 된다.

이렇게 추가한 후 IDE(VScode)를 재부팅해주면 해결될 것이다.

한번 컴파일러 옵션을 변경하면 VScode의 Setting이 기억하는지 해당 코드를 다시 삭제한 후 재실행해도 이전과 같은 에러가 나오지 않는다.

🛠 확장에서 Typescript 지원 기능 끄기

만약 위와 같은 방법으로도 해결되지 않는다면 VScode 확정에서 Typescript 지원 기능을 끄고 VScode를 재부팅해본다.

확정에 들어가 @builtin typescript를 검색하고 나온 위 기능을 "사용안함"을 클릭하고 "다시로드" 혹은 VScode를 재부팅하면 해결될 것이다.

만약 위 방법으로도 해결되지 않는다면, 실제 코드상의 문제일 확률이 높으니 수정한 코드가 있다면 다시 확인해봐야할 것 같다.