수정한 코드를 Vercel에 자동 배포하던 도중 몇 가지 에러를 만났다.
1. Module '"path"' has no exported member 'A'.
에러 문구에서 알 수 있듯이 "path"에서 내보내는 A가 없음을 의미한다. 나는 components/common/index.tsx에 A를 export했는데, 실제 A파일은 export default하고 있었다.
export default되는 파일은 import A from "components/common/A" 같은 형태로 호출된다. export는 import { A } from "components/common"의 형태이다. 문제는 전자가 후자보다 우선 시 되기 때문에 발생했다.
다만, Next.js 내에서는 아무런 문제가 없어서 배포 전에는 원인을 알 수가 없었다. dev 모드는 물론 build도 통과되어 방심했는데, 역시 배포 전에는 어찌될지 알 수가 없다.
2. Cannot find module 'path' or its corresponding type declarations.
export default에 맞게 호출 구문을 수정했지만 다른 에러가 발생했다.해당 path나 정의된 타입을 못 찾는단다. 자바스크립트 라이브러리라면 .d.ts 파일로 정의하면 된다지만, 내 문제는 단순한 컴포넌트 문제여서 해결책이 되지 않았다.
여러 번 수정·배포하고 검색하면서 살짝 감을 잡았다(고 생각했다). 파일명과 호출 컴포넌트명이 겹쳐서 발생하는 듯했다. 해서 모든 컴포넌트에 구분할 수 있는 추가 이름을 붙였다.
하지만 원인은 다른 곳에 있었다. Vercel의 가이드에 따르면 저장소(git)의 파일명과 수정한 코드의 호출 구문의 대소문자가 일치하지 않아 발생했을 경우가 많다고 한다. Vercel은 빌드할 때 파일의 대소문자를 구분하는 기능을 사용하기 때문이라고.
에러났을 때의 커밋을 확인하니 가이드를 이해할 수 있었다. 예를 들어, 내가 수정한 코드의 호출 구문은 import A from "components/common/A" 였다면, 저장소의 파일 이름은 a.tsx인 식이다. tsconfig의 forceConsistentCasingInFileNames를 false로 두고 작업했더니 발생한 불상사였기도 했다. 모든 컴포넌트 파일과 코드를 수정할 때는 해당 옵션을 켜두었다.
forceConsistentCasingInFileNames: 실행 중인 파일 시스템의 대소문자 구분 규칙을 따를지 여부를 설정한다.
참고
Vercel Guides - How do I resolve a 'module not found' error?
Socratone - Netlify를 이용해서 NextJS 앱을 배포할 때 발생하는 문제 해결 방법
TypeScript - tsconfig : forceConsistentCasingInFileNames
