Setting up fake worker failed: "Failed to fetch dynamically imported module: ..."

PDF.js 라이브러리를 추가하고 검증계 테스트 중 발생한 오류

 

프로젝트에 PDF를 볼 수 있도록 뷰어 라이브러리인 PDF.js를 추가했는데, 개발계에선 문제 없던 것이 검증계로 넘어가게 되면서 오류가 발생하더라.

 

일단 결론부터 말하면 nginx의 서버 설정 중 mine.types에서 mjs를 javascript로 읽도록 하였다.

// /nginx/mine.types에 아래와 같이 적용
application/javascript		js mjs;

 

---

 

일단 오류를 파악해보자면, pdf.js에서 worker 파일을 불러오지 못했다라는 전형적인 오류다. 이런 오류가 발생하는 큰 원인으로는

 

• workerSrc 경로가 잘못됨
• dev에서는 되는데 prod에서 base path 또는 assets 경로가 달라짐
• worker 파일이 배포 산출물에 포함되지 않음
• .mjs를 서버가 JS module로 제대로 서빙하지 못함(MIME/CORS 포함)

이라고 한다.

 

가장 높은 확률은 2번과 4번이었는데, 모듈 경로를 보아하니 문제없이 존재했기 때문에 4번으로 바로 직행했다.

여기서 봐야할 오류는 MINE과 CORS인데, 일단 내가 봐왔던 CORS 에러라면 개발자 도구에서 아주 빨간글씨로 정책 위반이라고 나왔을거라 예상한다. 하지만 개발자도구는 200 OK를 반환하고 있었다.

200 OK면 그냥 떠주면 안될까...

 

 

그래서 무슨 문제인지몰라 GPT에게 그대로 전달해보니, Content-Type에서 application/octet-stream 이라는 것이 보였다. 자주 보던 타입은 아니어서 검색해보니 

이 파일이 정확히 무슨 종류인지 모르겠으니, 일단 일반 바이너리 데이터로 보낼게.

 

라고 하더라. 역시 Web 답달까... 암묵적 형변환 같은 익숙한 향이 난다.

.mjs 확장자는 ES Module 형식의 Javascript 파일인데 바이너리 데이터로 읽으려고하니 문제가 된 것이다.

이 설정은 nginx에서 수정 가능했기 때문에 mine.types을 읽어보았다.

mjs는 추가되어있지 않았다.

 

중간에 pdf라고 추가되어있긴한데 저건 브라우저가 읽는 pdf고, 우리 pdf.js에서는 모듈로 넘어가기때문에 따로 추가해줘야하나보다. 아까 보았던 octet-stream 쪽을 보면 읽는 파일 확장자들이.. 음.. 무서운 친구들이 많이보이더라.

아무튼 javascript가 빠져있어 (?) mjs를 추가해 해결했다.

 

여담이지만, 추가했는데 바로 해결이 안돼서 파일에 제대로 저장이 안됐나 싶어 

grep -n "application/javascript" /etc/nginx/mime.types
8: application/javascript		js;
30: application/javascript		js mjs;

 

음 알고보니 위에 있었구요... 위에 써진 설정을보고 아래쪽 설정은 씹혔나보다.. 하나를 지워주니 문제없이 로딩 되어 pdf 뷰어 기능을 추가할 수 있었다.