[vue3 error] Vue packages version mismatch: vue-template-compiler@2.7.14, vue@3.3.4 (해결)

vue2를 사용하면 간단히 에러메시지에서 제안하는 내용으로 쉽게 해결이 가능하지만, 난 vue3를 사용하고 있어서 vue3 버전과 vue complier 버전이 맞지 않아 구글링을 해야 했다. 참 신기하게도 vue-template-compiler 2.7.14버전과  vue3 버전인 3.3.4 버전을 설치 후 실행도 잘 됬었다. 잘 되다가.. 물론 여러가지 뭘 건드린것 같긴 한데 이런 에러가 떠버렸다.

 

에러에서 제시하는 해결방법을 번역해보면,

vue-loader@>=10.0을 사용하는 경우 vue-template-compiler를 업데이트하기만 하면 됩니다. vue-loader@<10.0 또는 vueify를 사용하는 경우 vue-loader/vueify를 다시 설치하면 vue-template-compiler가 최신 버전으로 변경됩니다.

 

 

 

나는 package.json에 아래와 같이 정의했었다.

"vue": "^3.3.4",
"vue-loader": "^17.2.2",
"vuerify": "^0.4.0",
"vue-template-compiler": "^2.7.14"

vue-loader는 일단 10이상 버전이기때문에 vue-template-compiler를 지워도 보고, 업데이트도 해보고, 최신버전으로 다시 깔아보고 다 해봤지만 해결이 안됬다. 최후의 수단 구글링을 해보니, 스택오버플로우에서 어떤 분이 제안하는 내용이 있었다. 한번 시도해봐야겟다.

 

▼ stackoverflow 

vue3 부터는 vue-template-compiler가 지원이 안되니 삭제하고, @vue/compiler-sfc를 설치해서 써야되나보다. 그리고 설치만 하면 되는게 아니라 다른 패키지들도 같이 업데이트 해야한다. 나는 무식하게 에러가 해결될때까지 package.json에 있는 패키지 목록 중 될때까지 아래와 같이 업데이트했다. 중요한건 vue-template-compiler를 지우고 진행했고, 여러 버전들을 업데이트 하니 에러가 해결됬다.

 

• npm i -g @vue/cli
• npm i vue-router@4
• npm i babel-jest@next -D
• npm i vue-jest@next -D
• npm i vuerify@next
• npm i vue-loader@next

 

 

중간중간 jest가 들어있는데 jest는 테스트 라이브러리로 설치 안하신분들은 빼시면 됩니다. 중요한건 vue/cli , vue-router, vuerify, vue-loader를 업데이트 하면 해결 되는것 같습니다.