배경

gatsby 기반 프로젝트에서 에러가 발생했다.
프로젝트 폴더를 아무리 봐도 에러가 발생한 컴포넌트가 보이지 않았다.
vscode에서 cmd+shift+f로 검색해도 안 보이는데 대체 에러가 어디서 난다는 말인가!

+) vscode의 전역 검색 대상에서 숨김 파일.{file-name}과 /node_modules/는 제외된다. 파일을 열람한 상태로는 포함된다.

문제

Computers only know what you tell them.

에러는 외부 npm 패키지에 있었다.
PR을 보내자니 아래와 같은 상황이어서 직접 패키지를 수정하기로 했다.

• 빠른 해결이 필요
• 기능 이슈가 아니고, 개인적으로 필요한 수정
• 문제가 발생한 패키지의 github repository가 삭제되고 없음
• npmjs 마지막 업데이트가 6개월 전으로, 더 이상 관리되고 있지 않음

CI 구조 상 배포할 때마다 yarn clean && yarn dev 명령어를 수행하기 때문에 npm 패키지의 수정 사항을 보관할 방법이 필요했다.

해결 1

patch-package를 이용했다.

설치 방법은 npmjs patch-package에 잘 설명돼있다.
설치 이후 아래와 같은 순서로 에러를 해결한다.

1. /node_modules/에서 에러가 발생한 패키지의 코드를 수정한다.
2. yarn patch-package {package-name}를 수행하면 수정 사항이 /patches/에 저장된다.
3. git add paches/{package-name}+{version}.patch를 하고 평소처럼 commit하면 끝!

이렇게 하면, 최종으로 배포되는 코드 = 원본 패키지+수정 패치가 된다.

해결 2

(2021/9/16 Update)
Gatsby는 Component Shadowing을 지원하기 때문에, 굳이 patch-package를 사용하지 않아도 된다.

node_modules/에서 수정하고 싶은 파일을 찾아서 내 프로젝트 루트 디렉토리에서 동일한 디렉토리 구조로(중요) 저장하고 코드를 작성하면 된다.

남은 고민들

patch-package의 제작 의도는 다음과 같다.

patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.

패치 방식은 문제의 근본적인 해결이 아니다.
빠른 처리가 필요해서 어쩔 수 없이 사용하는 밴드다.

이번에 문제가 된 패키지는 총 54개의 dependency를 갖고 있는데, 벌써 dependency not met warning이 여러 개 뜨는 걸 확인했다.
앞으로 의존성 이슈가 발생할 위험이 있으니, 에러가 터지기 전에 미리 대비할 필요가 있다.