Could not find any element matching selector

Error message

Could not find any element matching selector '${elementSelector}'.

What it means

Thrown by attachRootComponentToElement when neither getAndRemovePendingRootComponentContainer nor document.querySelector returns an element for the given selector. This means no DOM node matches the root component selector supplied by the .NET side. The framework cannot attach a root component to a missing element.

Solutions

Verify the element exists in the host HTML at attach time using DevTools (document.querySelector('#yourselector')).
Correct the selector string in your .NET RootComponents configuration to match the actual element id/class.
Ensure the host page (index.html/_Host.cshtml/App.razor) contains the element.
If the element is added dynamically, defer Blazor start until after it is in the DOM.
Use a unique id and double-check spelling and the '#' / '.' prefix.

Example fix

// before
builder.RootComponents.Add<MyApp>('#appp'); // typo

// after
builder.RootComponents.Add<MyApp>('#app');
<!-- index.html -->
<div id="app">Loading...</div>

Defensive patterns

Strategy: validation

Validate before calling

const el = document.querySelector(selector);
if (!el) {
  throw new Error(`No element matches '${selector}'. Fix the selector or host HTML.`);
}
// proceed with attach

Try / catch

try {
  attachRootComponentToElement(selector, componentId, browserRendererId);
} catch (e) {
  if (/Could not find any element/.test(String(e?.message))) {
    // wait for the element then retry, or surface a clear config error
  } else { throw e; }
}

Prevention

Verify the host HTML contains the target element with the exact id/class.
Keep selector constants in one place to avoid typos.
If the element is injected dynamically, await its presence before starting Blazor.

When it happens

Trigger: The selector in Components.Add or app.RootComponents.Add does not match any element in the prerendered/initial HTML; the element is rendered after Blazor tries to attach; selector typo; using an id selector when the element has a class.

Common situations: Layout changed and the #app or #host id was renamed; SSR/prerender pipeline changed and the placeholder element is gone; SPA shell page missing the expected div; timing issue where the element is injected by another script after Blazor's attach.

Related errors

AI-assisted analysis of dotnet/aspnetcore@3600ca084e (2026-08-11). Data as JSON: /api/errors/cf38d11bfac0bb0f. Report an issue: GitHub.

Appendix: source

Thrown at src/Components/Web.JS/src/Rendering/Renderer.ts:49

  browserRenderer.attachRootComponentToLogicalElement(componentId, logicalElement, appendContent);
}

export function attachRootComponentToElement(elementSelector: string, componentId: number, browserRendererId: number): void {
  const afterElementSelector = '::after';
  const beforeElementSelector = '::before';
  let appendContent = false;

  if (elementSelector.endsWith(afterElementSelector)) {
    elementSelector = elementSelector.slice(0, -afterElementSelector.length);
    appendContent = true;
  } else if (elementSelector.endsWith(beforeElementSelector)) {
    throw new Error(`The '${beforeElementSelector}' selector is not supported.`);
  }

  const element = getAndRemovePendingRootComponentContainer(elementSelector)
    || document.querySelector(elementSelector);
  if (!element) {
    throw new Error(`Could not find any element matching selector '${elementSelector}'.`);
  }

  // 'allowExistingContents' to keep any prerendered content until we do the first client-side render
  // Only client-side Blazor supplies a browser renderer ID
  attachRootComponentToLogicalElement(browserRendererId, toLogicalElement(element, /* allow existing contents */ true), componentId, appendContent);
}

export function getRendererer(browserRendererId: number): BrowserRenderer | undefined {
  return browserRenderers[browserRendererId];
}

export function renderBatch(browserRendererId: number, batch: RenderBatch): void {
  const browserRenderer = browserRenderers[browserRendererId];
  if (!browserRenderer) {
    throw new Error(`There is no browser renderer with ID ${browserRendererId}.`);
  }

  const arrayRangeReader = batch.arrayRangeReader;

View on GitHub (pinned to 3600ca084e)