[트러블슈팅] 다른 환경에서의 서브 모듈을 못 찾을 경우 : Netlify + parcel 배포 오류 (Error: No prebuild or local build of @parcel/watcher found. )

😎 요약

개발 의존성의 의존성 파일인 package-lock.json 파일이 모종의 이유들로 잘못 깔릴 경우(option을 설정하지 않는다거나..),  다른 환경에서 돌아가는 라이브러리가 설치가 안 될 경우가 있다 (Netlify 배포 환경은 Linux x64, 내 로컬 환경은 Window11이다) 그럴 경우 package-lock.json파일을 의심해 보자

🚀 개요

package.json

  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  },

  Parcel 번들러를 이용한 프로젝트를 진행 후 이를 배포하기 위하여 Netlify 를 사용하였습니다. 평상시와는 다른 에러로그를 마주쳤습니다. @parcel/watcher 을 찾을 수가 없는 에러로그 였습니다. Netlify 내부에서는 위의 package.json 파일의 "build" 에 해당하는 스크립트를 실행하고, 이 과정에서 @parcel/watcher라는 서브 모듈을 발견하지 못한 상황입니다.

 

💩 에러 로그

10:21:19 AM: $ npm run build
10:21:20 AM: > y_fe_javascript_picture@1.0.0 build
10:21:20 AM: > parcel build ./index.html
10:21:20 AM: Error: No prebuild or local build of @parcel/watcher found. Tried @parcel/watcher-linux-x64-glibc. Please ensure it is installed (don't use --no-optional when installing with npm). Otherwise it is possible we don't support your platform yet. If this is the case, please report an issue to https://github.com/parcel-bundler/watcher.
10:21:20 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/@parcel/watcher/index.js:25:13)
10:21:20 AM:     at Module._compile (node:internal/modules/cjs/loader:1256:14)
10:21:20 AM:     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
10:21:20 AM:     at Module.load (node:internal/modules/cjs/loader:1119:32)
10:21:20 AM:     at Module._load (node:internal/modules/cjs/loader:960:12)
10:21:20 AM:     at Module.require (node:internal/modules/cjs/loader:1143:19)
10:21:20 AM:     at require (node:internal/modules/cjs/helpers:121:18)
10:21:20 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/@parcel/fs/lib/index.js:7:28)
10:21:20 AM:     at Module._compile (node:internal/modules/cjs/loader:1256:14)
10:21:20 AM:     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)

 

🧐 문제 해결 시도

 우선 로컬 환경에서 build가 안되는지 확인을 해봤습니다. 코드 에디터를 열어 `npm run build` 명령어를 실행시켜 build가 되는지 확인을 해봤지만 매우 build가 잘 됐습니다. 이로서 애러 문구의 뒷 문장의 의미를 확인할 수 있었습니다.

Tried @parcel/watcher-linux-x64-glibc. Please ensure it is installed (don't use --no-optional when installing with npm). Otherwise it is possible we don't support your platform yet. If this is the case, please report an issue to https://github.com/parcel-bundler/watcher.

 

 아마 Netlify 환경에서 내가 깃허브를 통해 연동시킨 레포지토리의 파일을 clone 하고, 이를 build 시키는 운영체제가 lunux-x64인 것으로 추측 되는데, parcel 번들러를 통해 빌드 시킬 경우 @parcel/watcher-linux-x64-glibc 라는 서브 모듈을 실행 시켜야 하는데 이를 찾지 못한 버그로 생각이 들었습니다. 

 

 그 후 저 에러 문구가 발생한 API의 코드를 확인하여 봤습니다.

 

 우선 저 binding 변수를 불러오는데 실패를 하여서 catch 문구를 통해 에러가 나온 상황입니다. 앞서 예측했듯이, linux-x64-glibc는 각각 Netlify에서 빌드하는 OS와 프로세스 아키텍쳐인 것을 확인할 수 있었습니다. 저 문구 require('watcher.node') 에서 'watcher' 서브 모듈을 불러오지 못한 것을 확인할 수 있었습니다. 

 

 결과적으로 말하자면  package-lock.json파일이 제대로 설치되지 않은 것으로 보입니다. parcel을 설치하면 parcel에서 사용하는 서브 라이브러리들을 자동으로 package-lock.json 파일에 작성하여 주는데, 이 중 linux 환경에 대한 watcher파일이 누락된 모양입니다. 그래서 내가 로컬 환경에서 빌드(Window 환경) 했을 경우 빌드가 가능했지만, Netlify에서 하였을 경우 Linux 환경에서 하다보니 빌드에 실패 한 것으로 예상됩니다.

 

 그 사실을 알 지 못한채, Parcel 공식문서를 읽어보기도, 잦은 구글링을 해보기도, parcel-watcher와 관련된 깃허브 이슈를 뒤져보기도 하였습니다. 깃허브 이슈를 뒤지다가 저와 같은 상황은 아니지만 같은 에러 문구를 받은 사람의 글을 확인할 수 있었습니다.

 

https://github.com/npm/cli/issues/4828

[BUG] Platform-specific optional dependencies not being included in `package-lock.json` when reinstalling with `node_modules` pr

 

 정확하게 이해한 것인지는 모르겠으나, "swc/core 라는 패키지를 설치하는데, eslint 에 의해서 내가 사용하고 있는 platform에만 특화된 환경을 설치 한다 그래서 option 을 따로 줘야지 모든 프로세스를 위한 환경을 설치해줄 것이다." 정도로 이해를 했습니다. 이 글에서 힌트를 얻었습니다. package-lock.json 파일에 문제가 있다는 것에 확신을 가져다 줬습니다.

 

😛 해결 방법

 우선 해결은 로컬에서 빌드가 잘 되는데, Netlify에서는 안되어 하루종일 시간을 보내 답답한 마음에 그냥 내 코드를 그대로 복사하고, 내가 사용했던 패키지들을 그대로 설치하고 Netlify로 배포를 해보니 웬걸? 배포 오류가 없이 성공한 것이다.

.. 진짜 어이없는 상황이었습니다. 운이 좋은건지 운이 없는건지.. ㅋㅋㅋㅋㅋ 

 

 그래서 앞서 package-lock.json 파일에 문제가 있다는 것을 인지한 상황에서 배포 성공한 클론 프로젝트의 package-lock.json의 내용을 그대로 원본 프로젝트로 옮겼다. 그때 되서 확인 할 수 있었는 장면은 git 에 의해서 새로운 라인이 추가 됐는데, 다음 아래 사진의 optionalDependencies 부분이 새로 추가된 것을 확인 할 수 있었다. 

 

 아마 다음에 같은 상황이 일어날 경우 package.json 파일을 그래도 두고, package-lock.json파일만 지우고 다시 설치 하는 방향으로 해도 괜찮을 것 같다.

 

 같은 package.json 파일이더라도 package-lock.json 파일이 달라질 수 있는 것인가? 아니면 라이브러리의 순서나 패키지가 설치될 상황에 문제가 생긴 것인가? 완전히 이해할 수는 없었습니다.

 

 모듈을 찾을 수 없다는 에러 문구를 보면 package-lock.json 파일에 서브모듈 의존성을 한번 의심해 보는 것도 좋을 것 같다.

 

💡새롭게 알게 된 것

1. 똑같은 라이브러리를 설치를 하였으나, 개인 환경에 의해 package-lock.json 파일이 다르게 작성될 수 있다는 것을 알게 됐다. 

2. 모듈을 찾을 수 없다는 에러 문구를 보면 package-lock.json 파일의 서브 모듈 의존성을 확인 하는 것도 좋은 습관인 것 같다.

 

참조

마감시간에 쪼들린 나의 시간들과 밤에 터져나간 내 뇌세포들