emberjs/ember.js · error

Invalid named block named detected, you may have created a n

Error message

Invalid named block named detected, you may have created a named block without a name, or you may have began your name with a number. Named blocks must have names that are at least one character long, and begin with a lower case letter

What it means

Glimmer's tokenizer supports named blocks with the syntax <:name> ... </:name>. When finishTag sees a StartTag named exactly ':' it means the named-block name is missing or invalid (e.g. you wrote <:> or <:123> leaving an empty-name tag), so it throws with guidance: names must be at least one character and begin with a lowercase letter.

Source

Thrown at packages/@glimmer/syntax/lib/parser/tokenizer-event-handlers.ts:117

    };
  }

  beginEndTag(): void {
    this.currentNode = {
      type: 'EndTag',
      name: '',
      start: this.source.offsetFor(this.tagOpenLine, this.tagOpenColumn),
    };
  }

  finishTag(): void {
    let tag = this.finish<StartTag | EndTag>(this.currentTag);

    if (tag.type === 'StartTag') {
      this.finishStartTag();

      if (tag.name === ':') {
        throw generateSyntaxError(
          'Invalid named block named detected, you may have created a named block without a name, or you may have began your name with a number. Named blocks must have names that are at least one character long, and begin with a lower case letter',
          this.source.spanFor({
            start: this.currentTag.start.toJSON(),
            end: this.offset().toJSON(),
          })
        );
      }

      if (voidMap.has(tag.name) || tag.selfClosing) {
        this.finishEndTag(true);
      }
    } else {
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- exhaustive
      assert(tag.type === 'EndTag', `Invalid tag type ${tag.type}`);
      this.finishEndTag(false);
    }
  }

View on GitHub (pinned to 26f97246a8)

Solutions

1. Name the block with a valid lowercase identifier: <:> → <:default> or <:header> ... </:header>.
2. Ensure the name begins with a lowercase letter (not a digit): <:1item> → <:item1>.
3. Verify matching start/end tags and that your toolchain version actually supports named blocks before relying on the syntax.

Example fix

// before
<:>
  content
</:>

// after
<:header>
  content
</:header>

// validate named-block tags before compiling
function assertValidNamedBlocks(template) {
  const bad = template.match(/<:\s*>|<:\s*\d[^>]*>/g);
  if (bad) throw new Error(`Invalid named block(s): ${bad.join(', ')}; name must start with a-z`);
}
assertValidNamedBlocks(template);

When it happens

Trigger: Compiling a template containing a malformed named-block start tag: <:> ... </:>, <:1foo>, or a tag where the name after ':' was stripped/empty so tag.name === ':' when finishTag (tokenizer-event-handlers) finalizes the StartTag.

Common situations: Early/experimental use of Glimmer named blocks with typos; template codemods that mangle <:yield> style tags; editor auto-completion inserting the colon-prefixed tag without the name; copying syntax from other frameworks (Vue slots, Angular ng-content).

Related errors

• Unexpected named block <:foo> inside <${name.chars}> HTML el
• Unexpected named blocks inside <${name.chars}> HTML element
• Unexpected content inside <${name}> component invocation: wh
• Unexpected block params list on <${name}> component invocati
• Component had two named blocks with the same name, `<:${name

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