Meituan-Dianping/mpvue · error

<template> cannot be keyed. Place the key on real elements i

Error message

<template> cannot be keyed. Place the key on real elements instead.

What it means

Dev-only warning in processKey: a key attribute was placed on a <template> element. <template> is an abstract wrapper compiled away with no real DOM node, so a key has nothing to attach to; keys belong on the real rendered elements inside it.

Source

Thrown at src/compiler/parser/index.js:316

  if (l) {
    const attrs = el.attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      attrs[i] = {
        name: el.attrsList[i].name,
        value: JSON.stringify(el.attrsList[i].value)
      }
    }
  } else if (!el.pre) {
    // non root node in pre blocks with no attributes
    el.plain = true
  }
}

function processKey (el) {
  const exp = getBindingAttr(el, 'key')
  if (exp) {
    if (process.env.NODE_ENV !== 'production' && el.tag === 'template') {
      warn(`<template> cannot be keyed. Place the key on real elements instead.`)
    }
    el.key = exp
  }
}

function processRef (el) {
  const ref = getBindingAttr(el, 'ref')
  if (ref) {
    el.ref = ref
    el.refInFor = checkInFor(el)
  }
}

function processFor (el) {
  let exp
  if ((exp = getAndRemoveAttr(el, 'v-for'))) {
    const inMatch = exp.match(forAliasRE)
    if (!inMatch) {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Move the :key from <template> onto the real element(s) inside it
2. If keying a group, wrap in a keyed real element or key each child individually

When it happens

Trigger: Thrown at src/compiler/parser/index.js:316 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/21a9b5f5c13185e9. Report an issue: GitHub.