[Vue] Vue 웹팩 빌드 에러 ( Vue packages version mismatch : )

오늘 심심해서 Vue기반으로 카카오맵API를 통해 지도를 가져오는 걸 했는데

웹팩 연습할 겸, main.js를 번들링 했더랬다. 근데 에러가 났다..  에러내용은 아래와 같다.

 

> @utt/message-system@1.1.4 build:es
> cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es

[!] Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (C:\projects\UTT-Message-System\module\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 packages version mismatch :

 

즉 Vue 버전이랑 vue-template-compiler 버전이 똑같아야 하는데... 버전이 다르다는 것..

Vue : 3.1.1버전

vue-template-compiler : 2.6.14버전

 

예전에도 이 에러가 떴던 것 같았는데, 그때는 그냥 Vue버전을 낮춰서 vue-template-compiler 버전에 맞췄었다.

왜냐하면 vue-template-compiler 최신버전이 2.6.14버전이기 때문....

 

근데 Vue3 이상의 버전을 쓰고 싶다는 오기 때문에 이것 저것 찾다가 방법을 찾은 겸에 정리 해본다.

 

 

1. 설치해둔 vue-template-compiler 제거

npm uninstall vue-template-compiler

 

2. vue-template-compiler를 대체하는 compiler-sfc 설치

npm i -D @vue/compiler-sfc

 

3. vue-loader 최신버전 설치

npm install vue-loader@next

 

 

이렇게 하면 Vue3 이상의 버전이라도 웹팩 빌드를 성공적으로 할 수 있다..