Vue "compiler-sfc" Error - Fix in CI

By Daniel Zoghalchali·Latchkey

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.

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

Diagnose it: is it resolution, transform, or memory?

Bundler failures in CI fall into three families and the error text often points at the wrong one. A module that resolves on your machine and not on the runner is nearly always case sensitivity or a missing optional dependency; a transform error is a config or version mismatch; and an unexplained kill with no stack is the out-of-memory reaper, not a build error at all.

# 1. resolution: does the file exist with EXACTLY that case?
git ls-files | grep -i "the/imported/path"

# 2. transform: what versions is CI actually resolving?
npm ls webpack vite rollup esbuild typescript 2>/dev/null | head -20

# 3. memory: was it killed rather than failed?
#    exit 137 = SIGKILL (OOM). Nothing in the bundler log will explain it.
node --max-old-space-size=4096 node_modules/.bin/vite build

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

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

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

Align compiler-sfc with vue

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

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

Make the build reproducible before you debug it

• Pin the Node major in setup-node and in engines. A bundler that resolves native bindings will pick a different prebuilt binary across majors.
• Delete node_modules locally and reinstall from the lockfile before concluding the runner is at fault; most "works locally" reports are stale local state.
• Set CI=true locally to reproduce. Several toolchains change behaviour under it, including treating warnings as errors.
• Exit code 137 is an out-of-memory kill. Raise --max-old-space-size or move to a larger runner rather than searching the bundler config.

How to prevent it

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

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation