{"record":{"id":"461d152564597b42","repo":"emberjs/ember.js","slug":"attempted-to-invoke-a-component-that-was-not-in-sc","errorCode":null,"errorMessage":"Attempted to invoke a component that was not in scope in a strict mode template, \\`<${variable}>\\`. If you wanted to create an element with that name, convert it to lowercase - \\`<${variable.toLowerCase()}>\\`","messagePattern":"Attempted to invoke a component that was not in scope in a strict mode template, \\\\`<(.+?)>\\\\`\\. If you wanted to create an element with that name, convert it to lowercase - \\\\`<(.+?)>\\\\`","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/@glimmer/syntax/lib/v2/normalize.ts","lineNumber":806,"sourceCode":"   * 2. If the variable is `this`, return a `ThisHead`\n   * 3. If the variable is in the current scope:\n   *   a. If the scope is the root scope, then return a Free `LocalVarHead`\n   *   b. Else, return a standard `LocalVarHead`\n   * 4. If the tag name is a path and the variable is not in the current scope, Syntax Error\n   * 5. If the variable is uppercase return a FreeVar(ResolveAsComponentHead)\n   * 6. Otherwise, return `'ElementHead'`\n   */\n  private classifyTag(\n    variable: string,\n    tail: string[],\n    loc: SourceSpan\n  ): ASTv2.ExpressionNode | 'ElementHead' {\n    let uppercase = isUpperCase(variable);\n    let inScope = variable[0] === '@' || variable === 'this' || this.ctx.hasBinding(variable);\n\n    if (this.ctx.strict && !inScope) {\n      if (uppercase) {\n        throw generateSyntaxError(\n          `Attempted to invoke a component that was not in scope in a strict mode template, \\`<${variable}>\\`. If you wanted to create an element with that name, convert it to lowercase - \\`<${variable.toLowerCase()}>\\``,\n          loc\n        );\n      }\n\n      // In strict mode, values are always elements unless they are in scope\n      return 'ElementHead';\n    }\n\n    // Since the parser handed us the HTML element name as a string, we need\n    // to convert it into an ASTv1 path so it can be processed using the\n    // expression normalizer.\n    let isComponent = inScope || uppercase;\n\n    let variableLoc = loc.sliceStartChars({ skipStart: 1, chars: variable.length });\n\n    let tailLength = tail.reduce((accum, part) => accum + 1 + part.length, 0);\n    let pathEnd = variableLoc.getEnd().move(tailLength);","sourceCodeStart":788,"sourceCodeEnd":824,"githubUrl":"https://github.com/emberjs/ember.js/blob/26f97246a8bf2e28edf26ac3093da2e86c04ffc5/packages/@glimmer/syntax/lib/v2/normalize.ts#L788-L824","documentation":"In strict-mode templates, an uppercase-first tag name is treated as a component invocation, so it must be bound in scope (imported component, local, or `@arg`). When it is not, the compiler throws instead of silently rendering an unknown element. Lowercase names are always treated as HTML elements.","triggerScenarios":"Compiling a strict-mode template with `<SomeComponent />` where `SomeComponent` was not imported/defined in the template's scope.","commonSituations":"Upgrading to Ember strict-mode templates or `<template>` blocks and forgetting the import; renaming a component file so the import no longer matches; copying loose-mode templates into strict mode.","solutions":["Import/define the component in scope: `import SomeComponent from '...';` before using `<SomeComponent />`.","If you actually wanted a plain HTML element, lowercase the tag name, e.g. `<my-widget>`.","Check the component name spelling/casing matches the in-scope binding."],"exampleFix":"// before (strict mode)\n<ProfileCard @user={{this.user}} />\n\n// after\nimport ProfileCard from './profile-card';\n<template><ProfileCard @user={{this.user}} /></template>","handlingStrategy":"validation","validationCode":"// Uppercase tags must be imported in strict-mode templates.\nfunction componentTagInScope(tagName, imports /* Set<string> */) {\n  return !/^[A-Z]/.test(tagName) || imports.has(tagName);\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Import every component used in a `<template>` block at the top of the file.","Keep component tags PascalCase and HTML tags lowercase to avoid ambiguity.","Run template linting (ember-template-lint) to catch unresolved component tags."],"tags":["glimmer","strict-mode","component-resolution","template-compiler"],"backgroundTag":"strict-mode-scope-resolution-failed","analyzedSha":"26f97246a8bf2e28edf26ac3093da2e86c04ffc5","analyzedAt":"2026-09-01T05:01:28.182Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}