{"record":{"id":"1b922a3b86093662","repo":"parcel-bundler/parcel","slug":"dynamic-diagnostic-from-vue-template-compiler-err","errorCode":null,"errorMessage":"[dynamic diagnostic from Vue template compiler errors]","messagePattern":"\\[dynamic diagnostic from Vue template compiler errors\\]","errorType":"exception","errorClass":"ThrowableDiagnostic","httpStatus":null,"severity":"error","filePath":"packages/transformers/vue/src/VueTransformer.js","lineNumber":261,"sourceCode":"          });\n        }\n        content = await preprocessor.render(content, options);\n      }\n      let templateComp = compiler.compileTemplate({\n        filename: asset.filePath,\n        source: content,\n        inMap: template.src ? undefined : template.map,\n        scoped: styles.some(style => style.scoped),\n        isFunctional,\n        compilerOptions: {\n          ...config.compilerOptions,\n          bindingMetadata: script ? script.bindings : undefined,\n        },\n        isProd: options.mode === 'production',\n        id,\n      });\n      if (templateComp.errors.length) {\n        throw new ThrowableDiagnostic({\n          diagnostic: templateComp.errors.map(err => {\n            return createDiagnostic(err, asset.filePath);\n          }),\n        });\n      }\n      let templateAsset: TransformerResult = {\n        type: 'js',\n        uniqueKey: asset.id + '-template',\n        ...(!template.src &&\n          asset.env.sourceMap && {\n            map: createMap(templateComp.map, options.projectRoot),\n          }),\n        content:\n          templateComp.code +\n          `\n${\n  options.hmrOptions\n    ? `if (module.hot) {","sourceCodeStart":243,"sourceCodeEnd":279,"githubUrl":"https://github.com/parcel-bundler/parcel/blob/59484858a1a0bcbb71f74088956bb437a2db6505/packages/transformers/vue/src/VueTransformer.js#L243-L279","documentation":"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).","triggerScenarios":"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.","commonSituations":"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).","solutions":["Read the surfaced compile error and fix the cited directive/expression in the <template>.","Simplify the failing template block to isolate which binding errors.","Check that any component used in the template is imported/registered (especially in functional templates).","Review vue.config.js compilerOptions for incompatible settings."],"exampleFix":"// before\n<div v-for=\"item in list\" @click=\"item(\">x</div>\n// after\n<div v-for=\"item in list\" :key=\"item.id\" @click=\"onClick(item)\">x</div>","handlingStrategy":"try-catch","validationCode":"import { compileTemplate } from '@vue/compiler-sfc';\nconst { errors } = compileTemplate({ source, filename, id: 'test' });\nif (errors.length) throw new Error('Template compile errors: ' + errors.map(e => e.message).join('; '));","typeGuard":null,"tryCatchPattern":"try {\n  await compileTemplateFor(asset);\n} catch (e) {\n  if (e?.diagnostics?.some(d => /compile|template/i.test(d.message))) {\n    /* show the offending template binding to the user */\n  }\n  throw e;\n}","preventionTips":["Register every component referenced in the template.","Keep template expressions side-effect-free and syntactically valid JS.","Test templates in isolation when changing compilerOptions."],"tags":["vue","template","compiler","parcel-transformer"],"backgroundTag":null,"analyzedSha":"59484858a1a0bcbb71f74088956bb437a2db6505","analyzedAt":"2026-08-13T04:06:35.925Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}