vuejs/vue · critical · Error

\n\nVue packages version mismatch:\n\n- vue@${vueVersion} ($

Error message

\n\nVue packages version mismatch:\n\n- vue@${vueVersion} (${vuePath})\n- ${packageName}@${packageVersion} (${packagePath})\n\nThis may cause things to work incorrectly. Make sure to use the same version for both.\nIf you are using vue-loader@>=10.0, simply update vue-template-compiler.\nIf you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump ${packageName} to the latest.\n

What it means

Thrown at module-load time by vue-template-compiler's index.js when require('vue').version differs from vue-template-compiler's package.json version. Unlike the server-renderer variant (error 3), this message includes the resolved file paths for both packages and specific remediation advice keyed to vue-loader version. vue-template-compiler must match the Vue runtime version exactly because the compiler output is version-specific.

Source

Thrown at packages/template-compiler/index.js:10

try {
  var vueVersion = require('vue').version
} catch (e) {}

var packageName = require('./package.json').name
var packageVersion = require('./package.json').version
if (vueVersion && vueVersion !== packageVersion) {
  var vuePath = require.resolve('vue')
  var packagePath = require.resolve('./package.json')
  throw new Error(
    '\n\nVue packages version mismatch:\n\n' +
      '- vue@' +
      vueVersion +
      ' (' +
      vuePath +
      ')\n' +
      '- ' +
      packageName +
      '@' +
      packageVersion +
      ' (' +
      packagePath +
      ')\n\n' +
      'This may cause things to work incorrectly. Make sure to use the same version for both.\n' +
      'If you are using vue-loader@>=10.0, simply update vue-template-compiler.\n' +
      'If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump ' +
      packageName +
      ' to the latest.\n'

View on GitHub (pinned to 9e88707940)

Solutions

1. Align versions exactly: npm install vue@2.7.16 vue-template-compiler@2.7.16 (must match character-for-character).
2. Run `npm ls vue vue-template-compiler` to find all installed copies and dedupe.
3. If using vue-loader >= 10, the message says to update vue-template-compiler to match vue.
4. If using vue-loader < 10 or vueify, reinstall vue-loader to bump vue-template-compiler transitively.
5. Delete node_modules and lockfile and reinstall to clear dedupe drift.

Example fix

// before
// package.json: "vue": "2.7.16", "vue-template-compiler": "2.6.14"

// after — exact match
// package.json: "vue": "2.7.16", "vue-template-compiler": "2.7.16"
// run: npm install

const vueVersion = require('vue/package.json').version
const compilerVersion = require('vue-template-compiler/package.json').version

if (vueVersion !== compilerVersion) {
  throw new Error(
    `vue@${vueVersion} and vue-template-compiler@${compilerVersion} must match exactly. ` +
    `Run: npm install vue-template-compiler@${vueVersion}`
  )
}
require('vue-template-compiler')

function versionsMatch(a: string, b: string): boolean {
  return a === b
}

// Like error 3, this throws at require() time. Pre-validate before requiring:
const pkg = name => require(`${name}/package.json`).version
if (pkg('vue') !== pkg('vue-template-compiler')) {
  throw new Error(`Run: npm install vue-template-compiler@${pkg('vue')}`)
}
require('vue-template-compiler')

When it happens

Trigger: Requiring vue-template-compiler in a project where node_modules/vue is a different version. The version strings are compared as exact matches, so even 2.7.14 vs 2.7.16 fails. The require.resolve paths are included so the user can see which physical files are mismatched.

Common situations: vue was upgraded but vue-template-compiler was left behind (very common — they are separate packages). npm dedupe installed a nested mismatched copy. A monorepo hoisted different versions. vue-loader pinned vue-template-compiler to an old version. Lockfile drift.

Related errors

• \n\nVue packages version mismatch:\n\n- vue@${vueVersion}\n-
• [@vue/compiler-sfc] SFC contains no <script> tags.
• [@vue/compiler-sfc] <script> and <script setup> must have th
• [@vue/compiler-sfc] ${msg}\n\n${filename}\n${generateCodeFra
• Invalid async component load result: ${comp}

AI-assisted analysis of vuejs/vue@9e88707940 (2026-08-11). Data as JSON: /api/errors/79f8306400de46b2. Report an issue: GitHub.