emberjs/ember.js · error

<:${name.chars}/> is not a valid named block: named blocks c

Error message

<:${name.chars}/> is not a valid named block: named blocks cannot be self-closing

What it means

A named block element written as self-closing (`<:header />`) is invalid because a named block exists to contain yielded content. The NamedBlockChildren normalizer rejects self-closing named-block syntax at compile time.

Source

Thrown at packages/@glimmer/syntax/lib/v2/normalize.ts:932

    }

    return this.block.builder.block(table, this.nonBlockChildren, this.loc);
  }
}

class ElementChildren extends Children {
  constructor(
    private el: BuildElement,
    loc: SourceSpan,
    children: (ASTv2.ContentNode | ASTv2.NamedBlock)[],
    block: BlockContext
  ) {
    super(loc, children, block);
  }

  assertNamedBlock(name: SourceSlice, table: BlockSymbolTable): ASTv2.NamedBlock {
    if (this.el.base.selfClosing) {
      throw generateSyntaxError(
        `<:${name.chars}/> is not a valid named block: named blocks cannot be self-closing`,
        this.loc
      );
    }

    if (isPresentArray(this.namedBlocks)) {
      throw generateSyntaxError(
        `Unexpected named block inside <:${name.chars}> named block: named blocks cannot contain nested named blocks`,
        this.loc
      );
    }

    if (!isLowerCase(name.chars)) {
      throw generateSyntaxError(
        `<:${name.chars}> is not a valid named block, and named blocks must begin with a lowercase letter`,
        this.loc
      );
    }

View on GitHub (pinned to 26f97246a8)

Solutions

  1. Write the named block with explicit open and close tags: `<:footer></:footer>`.
  2. If the block is intentionally empty, the empty explicit form is still required.
  3. Remove the named block entirely if it is not needed.

Example fix

// before
<Card><:footer /></Card>

// after
<Card><:footer></:footer></Card>
Defensive patterns

Strategy: validation

Validate before calling

// Reject self-closing named blocks.
function assertNamedBlockNotSelfClosing(el) {
  if (el.tagName.startsWith(':') && el.selfClosing) {
    throw new Error(`${el.tagName} cannot be self-closing; use <${el.tagName}></${el.tagName}>`);
  }
}

Prevention

When it happens

Trigger: Compiling a template containing `<:name/>` (or `<:name />`) as a child of an element/component.

Common situations: Auto-formatting or editors converting empty named blocks to self-closing form; developers writing `<:footer />` as shorthand for an empty block.

Related errors


AI-assisted analysis of emberjs/ember.js@26f97246a8 (2026-09-01). Data as JSON: /api/errors/82b760aa25462b67. Report an issue: GitHub.