Blazor: 'the required endpoints are not mapped on the server' for an InteractiveServer component

A component of type 'FixLab.Components.Pages.Counter' has render mode 'InteractiveServerRenderMode', but the required endpoints are not mapped on the server. The app was created without interactivity, and a component then got @rendermode InteractiveServer. Add the two Program.cs calls that switch Interactive Server on.

One call goes on the services, one on the endpoint mapping: .AddInteractiveServerComponents() after AddRazorComponents(), and .AddInteractiveServerRenderMode() after MapRazorComponents<App>(). Both are needed.

The error

fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]
      An unhandled exception has occurred while executing the request.
      System.InvalidOperationException: A component of type 'FixLab.Components.Pages.Counter' has render mode 'InteractiveServerRenderMode', but the required endpoints are not mapped on the server. When calling 'MapRazorComponents', add a call to 'AddInteractiveServerRenderMode'. For example, 'builder.MapRazorComponents<...>.AddInteractiveServerRenderMode()'
         at Microsoft.AspNetCore.Components.Endpoints.SSRRenderModeBoundary.AssertRenderModeIsConfigured[TRequiredMode](Type componentType, IComponentRenderMode specifiedMode, IComponentRenderMode[] configuredModes, String expectedCall)
         at Microsoft.AspNetCore.Components.Endpoints.SSRRenderModeBoundary.AssertRenderModeIsConfigured(HttpContext httpContext, Type componentType, IComponentRenderMode renderMode)

Why it happens

dotnet new blazor --interactivity None scaffolds a purely static app. Its Program.cs calls AddRazorComponents() and MapRazorComponents<App>() and nothing more. The @rendermode InteractiveServer line still compiles, because the template's _Imports.razor keeps the RenderMode import, so the build is clean and the problem only shows when a page that uses the render mode is requested. The home page kept answering 200 the whole time.

Interactive Server needs two halves: the services that run circuits, and the /_blazor endpoint the browser connects to. With only the services line added, the counter page failed with the same message. With only the endpoint line added it got worse: every request, the home page included, failed with Unable to find a provider for the render mode: Microsoft.AspNetCore.Components.Server.InternalServerRenderMode. This generally means that a call to 'AddInteractiveWebAssemblyComponents' or 'AddInteractiveServerComponents' is missing. If you see that one, the services line is the missing half.

The fix

using FixLab.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
app.UseHttpsRedirection();

app.UseAntiforgery();

app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

That is the scaffolded file with the two calls added. After the change the counter page returned 200, the browser console reported the WebSocket connecting to /_blazor, and three clicks showed "Current count: 3". One more difference from a project scaffolded with --interactivity Server: its App.razor also renders a ReconnectModal component, the notice users see when the connection drops. The counter works without it; copy it across if you want that notice.

How it was reproduced

dotnet new blazor -o FixLab --interactivity None on .NET SDK 10.0.401 (ASP.NET Core runtime 10.0.12, no extra packages), then a Counter.razor page with @rendermode InteractiveServer and a button. A GET of the page returned 500 with the error above. The services-only and endpoint-only variants of Program.cs were each built and run in turn before the full fix.

Frequently asked

How do I add interactivity to a Blazor app created with --interactivity None?

In Program.cs, add .AddInteractiveServerComponents() after builder.Services.AddRazorComponents() and .AddInteractiveServerRenderMode() after app.MapRazorComponents<App>(). Then @rendermode InteractiveServer works on any page or component.

Why does every Blazor page return 500 after adding AddInteractiveServerRenderMode?

The endpoint call is there but the services call is not. Without AddInteractiveServerComponents, every request fails with 'Unable to find a provider for the render mode', the home page included. Add the services call as well.

Does @rendermode InteractiveServer compile without these Program.cs calls?

Yes. The template's _Imports.razor imports the RenderMode class, so the directive compiles. The check happens at runtime, when a page that uses the render mode is requested; pages without it keep working.

More decoded errors in the Fixes category. Which render mode a page should use is covered in Blazor Render Modes: SSR, Server, WebAssembly, and the render mode chooser asks the questions for you.