parcel-bundler/parcel · error · ThrowableDiagnostic

[dynamic diagnostic from Vue compiler parse errors]

Error message

[dynamic diagnostic from Vue compiler parse errors]

What it means

Thrown by @parcel/transformer-vue when @vue/compiler-sfc's parse() returns a non-empty errors array for the component source. Each Vue compiler error is mapped through createDiagnostic (with the asset filePath) and wrapped in a ThrowableDiagnostic. This is the SFC-level parse stage (top-level <template>/<script>/<style> blocks), distinct from template/style compilation.

Source

Thrown at packages/transformers/vue/src/VueTransformer.js:70

    }
    return {
      customBlocks: contents.customBlocks || {},
      filePath: conf && conf.filePath,
      compilerOptions: contents.compilerOptions || {},
    };
  },
  canReuseAST({ast}) {
    return ast.type === 'vue' && semver.satisfies(ast.version, '^3.0.0');
  },
  async parse({asset, options}) {
    // TODO: This parses the vue component multiple times. Fix?
    let code = await asset.getCode();
    let parsed = compiler.parse(code, {
      sourceMap: true,
      filename: asset.filePath,
    });
    if (parsed.errors.length) {
      throw new ThrowableDiagnostic({
        diagnostic: parsed.errors.map(err => {
          return createDiagnostic(err, asset.filePath);
        }),
      });
    }

    const descriptor = parsed.descriptor;
    let id = hashObject({
      filePath: asset.filePath,
      source: options.mode === 'production' ? code : null,
    }).slice(-6);

    return {
      type: 'vue',
      version: '3.0.0',
      program: {
        ...descriptor,
        script:

View on GitHub (pinned to 59484858a1)

Solutions

1. Open the .vue file and fix the structural error at the cited line.
2. Confirm the file is a valid Vue 3 single-file component (single root <template>, valid block tags).
3. Upgrade/downgrade @vue/compiler-sfc to match the project's Vue version.
4. Validate the SFC in the Vue SFC Playground to isolate the parse error.

Example fix

// before
<template><div>hi</template>
// after
<template><div>hi</div></template>

import { parse } from '@vue/compiler-sfc';
const { errors } = parse(code, { filename });
if (errors.length) throw new Error('SFC parse errors: ' + errors.map(e => e.message).join('; '));

function isValidSfc(code) {
  return parse(code, { filename: 'x.vue' }).errors.length === 0;
}

try {
  await vueTransformer.parse({asset, options});
} catch (e) {
  if (e?.diagnostics?.some(d => /parse/i.test(d.message))) {
    /* surface SFC structural error to the user */
  }
  throw e;
}

When it happens

Trigger: compiler.parse(code, {sourceMap:true, filename}) is called on the asset code; malformed SFC structure (unclosed top-level tags, invalid block attributes, duplicate root blocks) populates parsed.errors.

Common situations: Unclosed <template> tag, a <script> and a second <script> without the setup/module split, custom block with malformed attributes, or an SFC written for Vue 2 loaded with the Vue 3 compiler (canReuseAST requires ^3.0.0).

Understand the failure class

• Parsing and encoding errors: unexpected token, malformed input — why parsers reject input and how to find the real culprit.

Related errors

• Vue config should be an object.
• Unknown template language: "${template.lang}"
• [dynamic diagnostic from Vue template compiler errors]
• Unknown script language: "${script.lang}"
• Unknown style language: "${style.lang}"

AI-assisted analysis of parcel-bundler/parcel@59484858a1 (2026-08-13). Data as JSON: /api/errors/364a6d3adfd9283d. Report an issue: GitHub.