Module not found: Can't resolve ...

분명 로컬에서는 문제없이 실행됬었는데...?

Vercel을 사용하다보면, 종종 로컬에서는 실행이 문제없이 되지만, Vercel에서는 컴파일에 실패하는 경우가 있다. 사실 천천히 파일의 문제를 읽어보면서 접근하면 아주 간단하게 문제는 찾을 수 있는데, 대충 읽다보면.. 컴파일 에러를 쉽게 찾지 못하게 된다...

원인

파일을 import 할 때 대소문자에서 나온 문제이다. import는 colLayoutFilled20로 하였지만, 실제파일은 ColLayoutFilled20이라 생긴 문제였다. nextjs에서는 build error가 없었지만 vercel에서 compile failed가 발생한 것을 보면, vercel이 대소문자에 좀 더 엄격하다는 것을 알 수 있다.

 

또 다른 문제

처음에는 파일 이름을 수정하고 코드를 push 하려고 했는데 문제는.. git add를 할 것이 없다고 계속 나왔다. (git 역시 파일을 대소문자를 구분안하고 받아들이는 게 분명하다.. ) 만일 이를 수정하려고 파일을 삭제하고 다시 넣어도 변화가 없을 것이다. 다른 수정이 있다면 변화는 있겠지만..

 

해결책

파일을 git rm으로 삭제하고 다시 추가한다면, 문제 없이 해결된다.

 

Retro

사실 svg와 이미지 파일은 snake로 파일을 보통 만들어서 문제를 많이 못만났던 케이스인데.. 다른 팀원과 작업을 하다보니 재미있는 에러도 보게된 것 같다. 이미지나 다른 assets파일의 이름에 대한 컨벤션은 정하지 않았었는데 이번 기회에 이 것에 대해서 이야기하는 것도 괜찮을 것 같다.