Vue "compiler-sfc" Error - Fix in CI

Vue compiles each .vue SFC with @vue/compiler-sfc. A malformed template/script block, or a compiler version that does not match vue, fails the SFC compile.

What this error means

The build fails compiling a .vue file with a compiler-sfc error pointing at the template or script block.

vue

[plugin:vite:vue] Element is missing end tag.
/src/components/Card.vue
3  |  <template>
4  |    <div class="card">
   |    ^

Common causes

Malformed SFC

An unclosed tag, multiple root template issues, or invalid script syntax breaks the parse.

compiler-sfc version mismatch

@vue/compiler-sfc is on a different version than vue, so the compiler rejects valid SFCs.

How to fix it

Fix the SFC markup

Close the tag the error points at and validate the template/script blocks.

Card.vue

<template>
  <div class="card"></div>
</template>

Align compiler-sfc with vue

Match @vue/compiler-sfc to the vue version and dedupe.

Terminal

npm install vue@latest @vue/compiler-sfc@latest
npm dedupe

How to prevent it

Keep vue and @vue/compiler-sfc on the same version.
Lint/format SFCs so malformed markup is caught before CI.