dotnet/aspnetcore · error · InvalidOperationException

The enclosing frame is not of the required type 'Component'.

Error message

The enclosing frame is not of the required type 'Component'.

What it means

Second guard in AddComponentRenderMode: an enclosing frame exists but its type is not Component (it is Element or Region). Render mode applies only to a component frame, so attaching it to an element or region scope is invalid.

Source

Thrown at src/Components/Components/src/Rendering/RenderTreeBuilder.cs:658

        // Note that a ComponentRenderMode frame is technically a child of the Component frame to which it applies,
        // hence the terminology of "adding" it rather than "setting" it. For performance reasons, the diffing system
        // will only look for ComponentRenderMode frames:
        // [a] when the HasCallerSpecifiedRenderMode flag is set on the Component frame
        // [b] up until the first child that is *not* a ComponentRenderMode frame or any other header frame type
        //     that we may define in the future

        var parentFrameIndex = GetCurrentParentFrameIndex();
        if (!parentFrameIndex.HasValue)
        {
            throw new InvalidOperationException("There is no enclosing component frame.");
        }

        var parentFrameIndexValue = parentFrameIndex.Value;
        ref var parentFrame = ref _entries.Buffer[parentFrameIndexValue];
        if (parentFrame.FrameTypeField != RenderTreeFrameType.Component)
        {
            throw new InvalidOperationException($"The enclosing frame is not of the required type '{nameof(RenderTreeFrameType.Component)}'.");
        }

        parentFrame.ComponentFrameFlagsField |= ComponentFrameFlags.HasCallerSpecifiedRenderMode;

        _entries.AppendComponentRenderMode(renderMode);
        _lastNonAttributeFrameType = RenderTreeFrameType.ComponentRenderMode;
    }

    /// <summary>
    /// Assigns a name to an event in the enclosing element.
    /// </summary>
    /// <param name="eventType">The event type, e.g., 'onsubmit'.</param>
    /// <param name="assignedName">The application-assigned name.</param>
    public void AddNamedEvent(string eventType, string assignedName)
    {
        ArgumentNullException.ThrowIfNull(eventType);
        ArgumentException.ThrowIfNullOrEmpty(assignedName);

View on GitHub (pinned to 294cab2f9b)

Solutions

  1. Ensure the frame immediately enclosing the render-mode call is a Component (OpenComponent), not an Element or Region.
  2. Move @rendermode to the child component tag, or call AddComponentRenderMode right after OpenComponent.
  3. Check the OpenElement/OpenComponent ordering around the call.

Example fix

// before
builder.OpenElement(0, "div");
builder.AddComponentRenderMode(RenderMode.InteractiveServer);
builder.CloseElement();

// after
builder.OpenComponent<MyComp>(0);
builder.AddComponentRenderMode(RenderMode.InteractiveServer);
builder.CloseComponent();
Defensive patterns

Strategy: validation

Validate before calling

// Track whether the current parent is a Component (not Element/Region) before setting render mode.
bool _inComponent = false;
void Render(RenderTreeBuilder b) {
    b.OpenComponent<MyComp>(0); _inComponent = true;
    if (_inComponent) b.AddComponentRenderMode(MyRenderMode);
    _inComponent = false; b.CloseComponent();
}

Prevention

When it happens

Trigger: Calling AddComponentRenderMode(mode) while the current parent is an element opened via OpenElement, or inside a region. In .razor this surfaces as a @rendermode placed on an HTML element instead of a component.

Common situations: Typing @rendermode="InteractiveServer" on a <div> rather than on the component; manual RenderFragment that opens an element then sets render mode; copy-paste of a component block where the open-element line wasn't swapped for open-component.

Related errors


AI-assisted analysis of dotnet/aspnetcore@294cab2f9b (2026-08-06). Data as JSON: /api/errors/084dc28ae2f8e363. Report an issue: GitHub.