vite 빌드 case 에러와 html2pdf.js 버전 오류

오전까지만 해도 잘 되던 빌드가 오후에 갑자기 에러가 발생했고 이것을 해결하는 과정을 타임라인에 따라 정리했다.

 

1. vite 빌드 시 case 에러

빌드 중 에러 발생

 

 

머지 후 CICD가 잘 돌다가 갑자기 에러가 발생했다.

 

[vite:esbuild-transpile] Transform failed with 1 error:

ERROR: Unexpected "case"

 

분명 로컬에서 빌드할 때는 에러가 발생하지 않았는데 말이다.

일단 CICD가 도는 yml 파일의 명령어를 체크해봤다.

 

//bitbucket-pipelines.yml
...
 script:
    - npm install -g pnpm@9.1.1 && pnpm install && pnpm run build-dev
...

 

 

빌드 될 때마다 pnpm 9.1.1 버전을 설치하고 pnpm install 하는데,

로컬에서 pnpm install 했더니 이제 같은 에러가 발생한다.

 

pnpm install 후 에러가 발생하니 버전 충돌 문제가 예상되었다.

 

 

 

2. html2pdf.js 다운그레이드

버전 문제인 것 같아 gpt에 package.json을 첨부해서 물어봤다.

그랬더니 뜬금없이 html2pdf.js를 다운그레이드 해보라는 것.

 

cursor에 내장된 gpt chat

 

 

도대체 왜 다운그레이를 하라는 거지? html2pdf.js 깃허브를 찾아가봤다.

깃허브에 떡하니 경고 문구가 있었다. 0.10.x 버전을 사용하지 말고 0.9.3 버전을 사용하라는 경고다.

 

우리는 0.10.2 버전으로 사용하고 있었다.

 

 

 

 

0.9.3 버전으로 다운그레이드 후 빌드를 다시 돌려 봤다.

이번엔 조금 다른 에러 메세지가 생겼다.

 

jsPDF - PDF Document creaion from JavaScript

 

새로운 에러가 추가되었다.

 

 

3. jsPDF 버전 업

 

html2pdf.js 라이브러리의 의존성 라이브러리 중에 jsPDF가 있는데,

html2pdf.js를 0.9.3버전으로 다운그레이드 하면서 jsPDF의 버전(1.4.x 버전)도 확 낮아졌는데 그것이 문제가 되는 것 같았다.

 

 

그래서 overrides로 jsPDF의 버전만 올려 봤다.

 

//package.json
 "devDependencies": {
		...
  },
  "overrides": {
    "jspdf": "2.5.2"
  }

 

기존 package-lock.json을 삭제하고 다시 install 해서 jspdf 버전업이 잘 적용되었다.

 

//package-lock.json
 "html2pdf.js": {
      "version": "0.9.3",
      "resolved": "<https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.9.3.tgz>",
      "integrity": "sha512-M254g3Z+ZsjtQFDxJlU6E8Zgb8xOpCBQQM1lFPn4Lq+myAdWoYtMFnwlVo/eOI9R1cG75+YmMSDQofkugwOV/Q==",
      "requires": {
        "es6-promise": "^4.2.5",
        "html2canvas": "^1.0.0-alpha.12",
        "jspdf": "2.5.2"
      }
    },

 

 

그래도 여전히 빌드 에러가 발생한다.

 

이후 여러 테스트를 하다가

jspdf를 html2pdf.js에 의존하지 않고 따로 사용하니 잘 된다.

 

결국 html2pdf.js를 삭제하고 jspdf와 html2canvas만 사용해서 pdf 다운로드 기능을 구현했다.

그러고 빌드 했더니 별 문제 없이 빌드가 되었다.

 

4. rollup 업데이트 이슈

 

이렇게 빌드 에러를 해결 후,

 

다음날 구글을 뒤져보니 깃허브에 아래 글이 올라왔다.

 

https://github.com/vitejs/vite/issues/19147

Vite-6.0.7 appears to transpile `case` statements incorrectly · Issue #19147 · vitejs/vite

 

 

요약하자면,

나와 같은 빌드 에러가 발생했고 rollup을 다운그레이드하면 해결된다는 거다.

rollup은 vite에 내장된 번들러인데 이 rollup이 잘못된 버전을 업데이트 한 모양이다.

 

다음날 바로 rollup 새로운 버전이 업데이트됐고 정말 그 문제였나 싶어 어제와 같은 상황으로 돌아가서 테스트 해보니 에러 없이 빌드가 잘 된다.

vite의 rollup과 esbuild에 관한 설명은 아래 링크를~

https://ko.vite.dev/guide/why.html

 

배운점 : npm 버전 관리 이해

근데 나는 package.json을 바꾸지도 않았는데 왜 pnpm install 과정에서 rollup이 자동으로 업데이트 되었을까.

 

바로 package.json의 ^4.9.2 와 같이 버전 앞에 ^ (캐럿) 이 붙어있어서였다.

캐럿이 붙으면 패치 또는 마이너 레벨 업데이트 범위 내에서 업그레이드가 될 수 있다는 뜻이었다. 

 

예를 들면 아래와 같이 작성한다면,

"rollup": "^4.5.2"

 

주요 버전을 뜻하는 가장 앞자리인 4가 바뀌지 않는 범위 내에서 최신 버전(4.5.7, 4.6.5)으로 설치한다는 뜻이다.

그래서 버전으로 고정하고 싶다면 ^나 ~를 붙이지 않고 기입해야한다.

“rollup”: “4.5.2”

 

 

더 자세한 글은 아래 정말 자세하게 나와있다.

 

https://dev.to/typescripttv/understanding-npm-versioning-3hn4

Understanding npm Versioning

 

 

 

그동안 노드 개발하면서 이런 기초적인 것을 이제야 알았다니..

아무튼 node는 버전 문제로 꼬이는 경우가 종종있는데 버전 관리를 제대로 이해하는 계기가 되었다.