parcel-bundler/parcel · error · ThrowableDiagnostic

[dynamic diagnostic from Vue template compiler errors]

Error message

[dynamic diagnostic from Vue template compiler errors]

What it means

Thrown by @parcel/transformer-vue after compiler.compileTemplate returns a non-empty errors array. compileTemplate turns the (already preprocessed) HTML template into a Vue render function; failures here mean the template is syntactically HTML-valid but semantically invalid for the Vue template compiler (bad directives, invalid expressions, binding errors).

Source

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

          });
        }
        content = await preprocessor.render(content, options);
      }
      let templateComp = compiler.compileTemplate({
        filename: asset.filePath,
        source: content,
        inMap: template.src ? undefined : template.map,
        scoped: styles.some(style => style.scoped),
        isFunctional,
        compilerOptions: {
          ...config.compilerOptions,
          bindingMetadata: script ? script.bindings : undefined,
        },
        isProd: options.mode === 'production',
        id,
      });
      if (templateComp.errors.length) {
        throw new ThrowableDiagnostic({
          diagnostic: templateComp.errors.map(err => {
            return createDiagnostic(err, asset.filePath);
          }),
        });
      }
      let templateAsset: TransformerResult = {
        type: 'js',
        uniqueKey: asset.id + '-template',
        ...(!template.src &&
          asset.env.sourceMap && {
            map: createMap(templateComp.map, options.projectRoot),
          }),
        content:
          templateComp.code +
          `
${
  options.hmrOptions
    ? `if (module.hot) {

View on GitHub (pinned to 59484858a1)

Solutions

1. Read the surfaced compile error and fix the cited directive/expression in the <template>.
2. Simplify the failing template block to isolate which binding errors.
3. Check that any component used in the template is imported/registered (especially in functional templates).
4. Review vue.config.js compilerOptions for incompatible settings.

Example fix

// before
<div v-for="item in list" @click="item(">x</div>
// after
<div v-for="item in list" :key="item.id" @click="onClick(item)">x</div>

import { compileTemplate } from '@vue/compiler-sfc';
const { errors } = compileTemplate({ source, filename, id: 'test' });
if (errors.length) throw new Error('Template compile errors: ' + errors.map(e => e.message).join('; '));

try {
  await compileTemplateFor(asset);
} catch (e) {
  if (e?.diagnostics?.some(d => /compile|template/i.test(d.message))) {
    /* show the offending template binding to the user */
  }
  throw e;
}

When it happens

Trigger: compileTemplate is called with source content, scoped flag, bindingMetadata from script, compilerOptions from config; any compiler error (v- directive misuse, {{ }} with invalid JS, component referenced but unregistered in functional mode) lands in templateComp.errors.

Common situations: A v-for without a key on a component that requires one, an @click handler with invalid JS expression, using TypeScript-only syntax in a template expression, or compilerOptions that conflict with the template (e.g. whitespace changes).

Related errors

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

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