프론트앤드 빌드 에러 추적: vercel, Cannot find module

Vite로 React 프로젝트를 진행하고, npm run build까지 무리없이 완료했다.

그러나 depoly에서 계속 오류가 발생했다.

 

error TS2307: Cannot find module

이 오류에 대한 해결 방법은 여러가지 제시되고 있었다.

그래서 하나씩 적용하며 해결책을 찾으려 했다.

 

1) 폴더 대소문자 오류

대문자로 잘못 작성해서 소문자로 수정할 경우 캐시가 남아 반영되지 않을 수 있다.

이 경우 캐시를 삭제해 해결할 수 있다.

삭제 후 다시 add, push 하면 된다.

그러나 오류는 사라지지 않았다.

git rm -r --cached .

2) ModuleResolution

타입스크립트는 모듈 해석 전략에 해당하는 ModuleResolution는 모듈을 어디서 가져오게 할건지 설정한다.

node와 classic이 잇으며 명시적으로 설정하지 않으면 module에 따라 정해진다.

classic의 경우 상대경로로 명시했을 때 동일한 파일이 아니므로 react-router-dom에 접근할 수 없다.

[TS] Cannot find module 오류 해결하기

 

이 경우 module의 설정을 node로 바꾸어 해결할 수 있다고 명시했다.

직접 선언한 파일도 다른 파일에 있는 경우이기 때문에 접근이 되지 않은 오류였다면 해결할 수 있지 않을까 기대했다.

그러나 이 경우 오류는 사라지지 않았다.

 

3) styled-component 타입 추가

styled-component의 모듈도 함께 인식이 안되기 때문에 함께 찾아봤다.

npm i --save-dev @types/styled-components​

 

또한 tsconfig.json의 types에 작성한 타입을 추가했다.

versel 배포 오류가 사라졌다.