gatsby 기반 프로젝트에서 에러가 발생했다.
프로젝트 폴더를 아무리 봐도 에러가 발생한 컴포넌트가 보이지 않았다.
vscode에서 cmd+shift+f로 검색해도 안 보이는데 대체 에러가 어디서 난다는 말인가!
+) vscode의 전역 검색 대상에서 숨김 파일.{file-name}
과 /node_modules/
는 제외된다. 파일을 열람한 상태로는 포함된다.
Computers only know what you tell them.
에러는 외부 npm 패키지에 있었다.
PR을 보내자니 아래와 같은 상황이어서 직접 패키지를 수정하기로 했다.
CI 구조 상 배포할 때마다 yarn clean && yarn dev
명령어를 수행하기 때문에 npm 패키지의 수정 사항을 보관할 방법이 필요했다.
patch-package
를 이용했다.
설치 방법은 npmjs patch-package에 잘 설명돼있다.
설치 이후 아래와 같은 순서로 에러를 해결한다.
/node_modules/
에서 에러가 발생한 패키지의 코드를 수정한다.yarn patch-package {package-name}
를 수행하면 수정 사항이 /patches/
에 저장된다.git add paches/{package-name}+{version}.patch
를 하고 평소처럼 commit하면 끝!이렇게 하면, 최종으로 배포되는 코드 = 원본 패키지+수정 패치가 된다.
(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이 여러 개 뜨는 걸 확인했다.
앞으로 의존성 이슈가 발생할 위험이 있으니, 에러가 터지기 전에 미리 대비할 필요가 있다.