vuejs/vue · error · Error

\n${err}${trace}\n

Error message

\n${err}${trace}\n

What it means

This is the onCompilationError callback wired into ssrCompileToFunctions during SSR. When a component's template fails to compile at render time, the compiler's warn hook routes the error here, which wraps it in a new Error with red ANSI color codes (\u001b[31m / \u001b[39m) and a component trace generated by generateComponentTrace. It is re-thrown so the SSR render pipeline surfaces it to the caller's callback.

Source

Thrown at packages/server-renderer/src/render.ts:30

  createComponent,
  createComponentInstanceForVnode
} from 'core/vdom/create-component'
import VNode from 'core/vdom/vnode'
import type { VNodeDirective } from 'types/vnode'
import type { Component } from 'types/component'

let warned = Object.create(null)
const warnOnce = msg => {
  if (!warned[msg]) {
    warned[msg] = true
    // eslint-disable-next-line no-console
    console.warn(`\n\u001b[31m${msg}\u001b[39m\n`)
  }
}

const onCompilationError = (err, vm) => {
  const trace = vm ? generateComponentTrace(vm) : ''
  throw new Error(`\n\u001b[31m${err}${trace}\u001b[39m\n`)
}

const normalizeRender = vm => {
  const { render, template, _scopeId } = vm.$options
  if (isUndef(render)) {
    if (template) {
      const compiled = ssrCompileToFunctions(
        template,
        {
          scopeId: _scopeId,
          warn: onCompilationError
        },
        vm
      )

      vm.$options.render = compiled.render
      vm.$options.staticRenderFns = compiled.staticRenderFns
    } else {

View on GitHub (pinned to 9e88707940)

Solutions

1. Read the wrapped error message (it includes the original compilation error) and fix the template syntax in the named component.
2. If the template is dynamic, validate/sanitize it before assignment to vm.$options.template.
3. Pre-compile templates at build time (vue-loader) instead of runtime compilation to catch errors earlier.
4. Check the component trace to find which nested component's template failed.

Example fix

// before — runtime template with syntax error
{ template: '<div><p>{{ msg }</div>' }

// after — valid template
{ template: '<div><p>{{ msg }}</p></div>' }

// Pre-validate component templates before SSR using the SSR compiler in isolation.
import { compile } from 'vue-template-compiler'

function templateCompiles(template: string): boolean {
  const res = compile(template)
  return !res.errors || res.errors.length === 0
}

// during component registration:
if (vm.$options.template && !templateCompiles(vm.$options.template)) {
  console.error(`Bad template in ${vm.$options.name}`)
}

// No type guard — runtime template strings are not statically checkable.
// Use build-time precompilation instead.

renderer.renderToString(app, (err, html) => {
  if (err && err.message.includes('\u001b[31m')) {
    // strip ANSI for logging
    const clean = err.message.replace(/\u001b\[\d+m/g, '')
    logger.error('SSR template compile error:', clean)
  }
})

When it happens

Trigger: Any in-browser template that fails SSR compilation: invalid template syntax, unsupported directive in SSR, a template referencing compiler options that don't exist in the SSR compiler. Triggered inside normalizeRender when ssrCompileToFunctions emits a warning that is actually fatal.

Common situations: A component uses a template string with a syntax error (unclosed tag, invalid expression). A component relies on a client-only template feature the SSR compiler doesn't support. A dynamic template string constructed at runtime contains user input that breaks parsing.

Related errors

• function template is only supported in renderToString.
• render function or template not defined in component: ${vm.$
• render cannot be called without a template.
• createStream cannot be called without a template.
• Content placeholder not found in template.

AI-assisted analysis of vuejs/vue@9e88707940 (2026-08-11). Data as JSON: /api/errors/d8ef0ff332cdf970. Report an issue: GitHub.