작업 중 디렉토리 이름이나 파일명의 대소문자를 수정한 적이 있다면? 😳

Module not found: 에러

배포시 Module not found:와 관련된 에러는 import 경로의 해당 파일을 찾을 수 없음을 의미한다. 로컬과 리모트 시스템 사이에 파일 이름이 달라서 (대표적으로 대소문자 불일치) 로컬 작업에서 린트에 에러가 잡히지 않았다.

Vercel은 배포시 대소문자 구분 파일 시스템(case-sensitive filesystem)을 사용하기 때문에 이런 빌드 에러가 나온 것이다.

다음은 경험(?)에서 나온 몇가지 케이스, 배포하기 전에 확인할 것!!

---

import 구문의 경로를 확인할 것

보통은 경로가 잘못되면 린트가 알아서 강렬하게 표시해 주기 때문에, 이 경우는 수정이 용이하다. 하지만 대소문자는..?

예) import { IoMdClose } from "react-icon/io"

import {...} from "react-icon/Io" // x
import {...} from "React-icon/io" // x

---

✅ git ignorecase 옵션

레포지토리와 로컬의 파일 시스템이 동일한지 확인한다. 일반적으로 git을 사용한다면 다음 설정이 되어있는지 확인한다.

git config core.ignorecase false

---

전부 시도해 봤지만 또 에러를 만났다. 대소문자만 다른 같은 경로에서 컴포넌트를 중복으로 가져와 충돌이 났다.

Type error: File name '...' differs from already included file name '...' only in casing.

원격과 싱크를 맞춰놓은 후에 로컬에서 캐시를 지우면 모든 파일 목록들이 변경된 사항으로 들어온다. 전부 스테이지에 올리면 문제(?)의 파일만 변경된 항목에 남게 된다.

git rm -r --cached .
git add .
git commit -m "[fix] 대소문자 중복 에러 수정"

---

출처

• guides | vercel
• git cache 삭제