2.7 버전 업데이트 후 컴파일 에러를 잡아 봅시다.

2.7 버전으로 올리는 이유는 ?

• Composition API 지원
• Script Setup 지원
• 최상위 sript 및 import 지원
• Ref 및 defineProps 지원 등

Vue 에서 3로 마이그레이션 하기 전에 3에서 사용할 수 있는 최대한 기능을 넣어 주었다.
꽤 야심차게 준비해서 지원한다는 느낌이 들었다.
3 버전으로 바로 마이그레이션 하면 더없이 좋겠지만 여러가지 환경 및 상황을 고려하여 아직은 2 버전을 사용 할 필요가 있기 때문이다.

시놉시스

기존 사용하던 2.6 / 2.5 버전대의 프로젝트를 2.7로 마이그레이션 할 필요가 있어 마이그레이션 중
마주한 에러들 해결 방법을 정리한 글이다.

과정

1. 일단 Vue 2.7 로 올린다

yarn upgrade vue@^2.7

틸드(~): 패치만 최신버전 허용 / 캐럿(^): 마이너, 패치 최신버전 허용
마이너 버전 및 패치 버전은 최신버전을 허용 할 필요가 있어 ^2.7 버전으로 사용한다.

2. 마주한 첫번째 에러

	Failed to compile../src/components/lnb/voucher/VoucherGuide.vue
    Module Error (from ./node_modules/vue-loader/lib/index.js):
    Vue packages version mismatch:
    - vue@2.7.7 (/Users/PROJECT_RROUTES/node_modules/vue/dist/vue.runtime.common.js)
    - vue-template-compiler@2.6.10 (/Users/PROJECT_RROUTES/node_modules/vue-template-compiler/package.json)
    This may cause things to work incorrectly. Make sure to use the same version for both.
    If you are using vue-loader@>=10.0, simply update vue-template-compiler.
    If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

vue 2.7 버전과 vue-template-compiler 버전이 호환되지 않는다는 내용이다.
vue-loader 10버전 이상을 쓰고 있다면 vue-template-compiler 를 업데이트하면 되고
10버전 미만 혹은 vueify를 사용한다면 vue-loader/vueify를 재설치하면 최신버전으로 범위를 띄게 된다는 것

여기까지가 에러 내용이다.
에러 메세지가 하라는것 만으로 해결 하기 힘든 에러가 있다.

처음에는 에러 메세지 내용 대로 적용 했다.
vue-loader 를 아예 사용하지 않았기 때문에 10버전으로 인스톨 후 재실행 하였다

결과는 같은 에러를 내뱉었고
node-module 을 날리고 package-lock.json 에 있는 호환성 도큐먼트가 남아서 그럴수도 있다고 생각하여 모두 지우고 yarn 실행해도 같은 에러를 뿜는다.

ChatGPT 에도 물어보고 구글링을 해도 같은 해결 내용을 반복 할 뿐
vue-template-complier와 vue-loader 버전을 여럿 테스트 해보았으나 같거나 비슷한 에러를 계속 내뿜었다.

그러던 중 같은 팀의 천재 개발자가 2.7 버전일 경우
"vue-loader": "^15" 로 하면 된다고 하여 설치 후 컴파일 했더니 뭔가 다르다. 그리고 역시
다른 에러를 마주하게 되는데,

3. 두번째 에러

in ./src/assets/scss/common.scss?vue&type=style&index=0&lang=scss&

Syntax Error: TypeError: this.getOptions is not a function


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./src/assets/scss/common.scss?vue&type=style&index=0&lang=scss& 4:14-360 15:3-20:5 16:22-368
 @ ./src/assets/scss/common.scss?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.221:1024/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

결국 해당 에러는 sass-loader 버전 호환이 안되어서 나오는 오류였다.
ChatGPT 문의 결과 sass-loader, postcss-loader, css-loader 받으면 해결 된다길래
하나씩 받아서 테스트 해보니 역시 같은 에러를 내뱉는다. 역으로 하나씩 제거해서 테스트 해봐도 진척이 없었다.
구글링 결과 "sass-loader": "^10" 버전 이하로 받으라고 하여 호환 가능한 버전 중 가장 최신버전인 10.0.0 버전으로 설치하니 에러 메세지가 바뀌었다. (다 왔다고 생각했지)

4. 세번째 에러

Syntax Error: 
      filter: alpha(0);
             ^
      $color: 0 is not a color.
    ╷
780 │       filter: alpha(0);
    │               ^^^^^^^^
    ╵
  stdin 780:15  root stylesheet
      in /Users/PROJECT_ROUTES/assets/scss/common.scss (line n, column n)


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./src/assets/scss/common.scss?vue&type=style&index=0&lang=scss& 4:14-360 15:3-20:5 16:22-368

이건 솔직히 예상 못했는데 해당 스타일을 제거 했을때 정상적으로 빌드가 되는걸 보니
filter 사용 에러인것 같았다.
팀원 문의 결과 filter: alpha는 IE 대응이었고 alpha(opacity = 0) 으로 사용 하면 정상적으로 빌드가 된다.

5. 해결 완료!

  - Local:   http://localhost:1024/ 
  - Network: http://111.111.111:1024/

(너무 보고 싶었던 컴파일 완료 로컬호스트 포트.)

결론

ChatGPT를 사용하면서 깜짝 놀라지만 아직 모르는게 많다.
스택 오버플로우의 경우도 채택된 답변 말고 1~2개 좋아요 받은 답변이 오히려 내 환경에서는 해결 하는 케이스가 있듯이
여러가지 테스트를 해봐야 할 것 같다.
(다음에 내가 보고 참조하려고 적은 글)