2020-12-19-TIL

Vue packages version mismatch

Vue 프론트엔드 프로젝트를 띄우다가 다음 에러를 만났다.

Vue packages version mismatch:

- vue@2.6.12
- vue-template-compiler@2.5.17

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.

    at Object.<anonymous> (/Users/ham/Desktop/Projects/ProofU/frontend/node_modules/vue-template-compiler/index.js:8:9)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/ham/Desktop/Projects/ProofU/frontend/node_modules/vue-loader/lib/parser.js:1:18)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
 @ ./src/router/index.js 13:0-50
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

npm update vue-template-compiler

• yunzema.tistory.com/82

---

왜 두 버전이 같아야 하는가

vue-template-compiler는 .vue 파일의 <template>을 미리 렌더 함수로 컴파일하는 패키지다. README는 대부분의 경우 vue-loader와 함께 쓰게 된다고 설명한다. 컴파일러가 만든 렌더 함수는 런타임 패키지인 vue가 실행하므로, 둘의 버전이 다르면 컴파일러가 만든 코드를 런타임이 기대와 다르게 해석할 수 있다.

그래서 이 패키지는 로드되는 순간 버전을 직접 검사한다. v2.6.12 태그의 packages/vue-template-compiler/index.js는 require('vue').version과 자기 package.json의 버전을 비교하고, 하나라도 다르면 위 메시지를 담은 Error를 던진다.

if (vueVersion && vueVersion !== packageVersion) {
  // ...
  throw new Error('\n\nVue packages version mismatch:\n\n' + /* ... */)
}

비교가 !==이므로 메이저나 마이너만 맞아서는 안 되고 패치 버전까지 정확히 같아야 한다. 이번에는 vue@2.6.12와 vue-template-compiler@2.5.17로 마이너 버전부터 달랐다.

---

npm update가 해결하지 못하는 경우

메시지는 vue-loader@>=10.0을 쓴다면 vue-template-compiler만 업데이트하면 된다고 안내한다. 다만 npm 문서에 따르면 npm update는 package.json에 적힌 semver 범위를 지키는 안에서만 최신 버전으로 올린다. 예를 들어 ^2.5.17이면 2.x 안에서 올라가지만, 2.5.17처럼 버전을 고정해 두었다면 그대로 남는다. 그때는 npm install vue-template-compiler@2.6.12 --save-dev처럼 vue와 같은 버전을 직접 지정해야 한다.

참고한 자료외부 출처 2

외부 출처

• vue-template-compiler README (v2.6.12)GitHub
• npm-update (npm v6 docs)docs.npmjs.com