emberjs/ember.js · error

You attempted to invoke a path (\`<${resolution.path}>\`) bu

Error message

You attempted to invoke a path (\`<${resolution.path}>\`) but ${resolution.head} was not in scope

What it means

Similar to the uppercase case, but for a tag name written as a path (`<foo.bar />` or any path head). The compiler resolved the component path and found the head not in scope under strict-mode resolution rules, so it cannot compile the invocation.

Source

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

    let variableLoc = loc.sliceStartChars({ skipStart: 1, chars: variable.length });

    let tailLength = tail.reduce((accum, part) => accum + 1 + part.length, 0);
    let pathEnd = variableLoc.getEnd().move(tailLength);
    let pathLoc = variableLoc.withEnd(pathEnd);

    if (isComponent) {
      let path = b.path({
        head: b.head({ original: variable, loc: variableLoc }),
        tail,
        loc: pathLoc,
      });

      let resolution = this.ctx.isLexicalVar(variable)
        ? { result: ASTv2.STRICT_RESOLUTION }
        : this.ctx.resolutionFor(path, ComponentSyntaxContext);

      if (resolution.result === 'error') {
        throw generateSyntaxError(
          `You attempted to invoke a path (\`<${resolution.path}>\`) but ${resolution.head} was not in scope`,
          loc
        );
      }

      return new ExpressionNormalizer(this.ctx).normalize(path, resolution.result);
    } else {
      this.ctx.table.allocateFree(variable, ASTv2.STRICT_RESOLUTION);
    }

    // If the tag name wasn't a valid component but contained a `.`, it's
    // a syntax error.
    if (tail.length > 0) {
      throw generateSyntaxError(
        `You used ${variable}.${tail.join('.')} as a tag name, but ${variable} is not in scope`,
        loc
      );
    }

View on GitHub (pinned to 26f97246a8)

Solutions

1. Bring the path head into scope (import the component or bind it via `let`/block param/`@arg`).
2. If it is a property on the context, access it via `{{this.path}}` in content instead of as a tag.
3. If it was meant to be a plain element, use a lowercase literal tag name.

Example fix

// before (strict mode, `widgets` not in scope)
<widgets.chart @data={{this.data}} />

// after
import Chart from './chart';
<template><Chart @data={{this.data}} /></template>

// Verify dotted tag heads resolve before compiling.
function dottedTagHeadInScope(tag, scope) {
  if (!tag.includes('.')) return true;
  return scope.has(tag.split('.')[0]);
}

When it happens

Trigger: Compiling a strict-mode template with a path-style tag `<some.path />` or `<Foo.bar />` where the head of the path is not a scoped binding resolvable as a component.

Common situations: Referencing nested components via dot paths without the base binding being imported; leftover loose-mode dot-path component invocations migrated to strict mode; typos in local names.

Related errors

• You attempted to pass a path as argument (\`${arg.name}={{${
• Attempted to invoke a component that was not in scope in a s
• Attempted to resolve `${name}`, which was expected to be a c
• Attempted to resolve a dynamic component with a string defin
• Attempted to resolve `${value}`, which was expected to be a

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