Help with Blazor Component Error: 'RenderMode' does not contain a definition for 'InteractiveServer'

[ainsleybernard]

Hello, I need some help on how to use non-routable components in razor pages, I am upgrading my project from .net 6 to .net 8.

I am getting the following error in my razor page
'RenderMode' does not contain a definition for 'InteractiveServer'

My index.cshtml contains the following code: <component type="typeof(Counter)" render-mode="InteractiveServer"/>

From what I understand the only valid modes are
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/component-tag-helper?view=aspnetcore-8.0#additional-resources

• WebAssembly
• WebAssemblyPrerendered
• ServerPrerendered
• Server
• Static

I thought we are supposed to use "InteractiveServer" instead of "Server"? I may have confused myself with docs
https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0&tabs=visual-studio

Can someone please help clarify?

I attempt to add the following @using static Microsoft.AspNetCore.Components.Web.RenderMode to my _Imports.razor
but this does not resolve the issue, could the problem be due to my project structure?

For reference my project is setup as the following

Razor Component

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

_Layout.cshtml

<base href="~/" />
<script src="~/_framework/blazor.web.js" ></script>

My Startup Configuration looks like this, shorten for brevity

    _ = services.AddRazorPages()
     .AddRazorOptions(options =>
     {
         options.ViewLocationFormats.Add("/{0}.cshtml");
     })
    // Adds Blazor Components support
    builder.Services.AddRazorComponents().AddInteractiveServerComponents().AddHubOptions(options =>
    {
        //options
    }).AddCircuitOptions(o =>
    {
        o.DetailedErrors = builder.Environment.IsDevelopment();
    });


       app.UseEndpoints(endpoints =>
          {
              endpoints.MapRazorPages();
              endpoints.MapRazorComponents<Components.App>()
     .AddInteractiveServerRenderMode();
              endpoints.MapControllers();
          });

My _Imports.razor looks like this

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode

My _ViewImports.cshtml looks like this

@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Localization;

@inject IViewLocalizer Localizer

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

I have the following Folder Structure; I placed my razor component in the Shared folder under pages.

• Project.Web
  • Components
    • App.razor
  • Pages
    • Home
      • Index.cshtml
    • Shared
      • Components
        • Counter.razor
      • _Layout.cshtml
  • _Imports.razor
  • _ViewImports.cshtml

Thanks!