How to get it to work with the new Blazor Web app template(dotnet 8)?

[namvvo]

On Server Program.cs:

builder.Services.AddBlazoredLocalStorage();

Page:

@page "/localstorageonserver"
@using Blazored.LocalStorage
@inject ILocalStorageService _localstorage;

<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++;
        _localstorage.SetItemAsync("currentCount", currentCount);
    }
    protected override async Task OnInitializedAsync()
    {

        var count = await _localstorage.GetItemAsStringAsync("currentCount");
    }
}

It shows the error:
JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

The same applied to Client Project:

[Gareth064]

I've just come across this.

I am using the Blazor Web App template, full WASM.

This is my Program.cs in the Host/Server project.

using Blazored.LocalStorage;
using MudBlazor.Services;
using OneWorkList.Components;

var builder = WebApplication.CreateBuilder(args);

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

builder.Services.AddMudServices();
builder.Services.AddBlazoredLocalStorage();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    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.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(OneWorkList.Client._Imports).Assembly);

app.Run();

Results in

InvalidOperationException: JavaScript interop calls cannot be issued during server-side static rendering, because the page has not yet loaded in the browser. Statically-rendered components must wrap any JavaScript interop calls in conditional logic to ensure those interop calls are not attempted during static rendering.
Microsoft.AspNetCore.Components.Endpoints.UnsupportedJavaScriptRuntime.InvokeAsync<TValue>(string identifier, CancellationToken cancellationToken, object[] args)
Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync<TValue>(IJSRuntime jsRuntime, string identifier, CancellationToken cancellationToken, object[] args)
Blazored.LocalStorage.BrowserStorageProvider.ContainKeyAsync(string key, CancellationToken cancellationToken)
System.Runtime.CompilerServices.ValueTaskAwaiter<TResult>.GetResult()
OneWorkList.Client.Layout.MainLayout.OnInitializedAsync() in MainLayout.razor.cs
+
        if (await LocalStorage.ContainKeyAsync("theme"))
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> oldTree, ArrayRange<RenderTreeFrame> newTree)
Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, out Exception renderFragmentException)
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment)
Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters)
Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.BeginRenderingComponent(IComponent component, ParameterView initialParameters)
Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.RenderEndpointComponent(HttpContext httpContext, Type rootComponentType, ParameterView parameters, bool waitForQuiescence)
System.Threading.Tasks.ValueTask<TResult>.get_Result()
Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context)
Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context)
Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c+<<InvokeAsync>b__10_0>d.MoveNext()
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

I have tried using builder.Services.AddBlazoredLocalStorageAsSingleton(); instead but the app fails to load at all because this is a singleton which is relying on a scoped JSInterop service. Something like that.

I've seen @chrissainty mention in a previous issue that they will wait for .NET8 to be out for a little while before releasing updates to this library to work with it. So I think for now, we won't be able to use it using the new .NET8 Web App version of Blazor.

[bestnatureguy]

You guys might be able to disable prerendering to get this to work. That can be done on the component tag. Alternately, does anybody know of another library that does what this one does?

[chrissainty]

This is expected behaviour in .NET8. In fact it's very similar behaviour Blazor has always had. You can't call a JS runtime that doesn't exist.

If you're using the new templates and have pre-rendering the error is telling you the solution. Make the call in OnAfterRender(Async).

[bestnatureguy]

Thanks Chris!

…

On Sat, Feb 3, 2024, 10:41 AM Chris Sainty ***@***.***> wrote: This is expected behaviour in .NET8. In fact it's very similar behaviour Blazor has always had. You can't call a JS runtime that doesn't exist. If you're using the new templates and have pre-rendering the error is telling you the solution. Make the call in OnAfterRender(Async). — Reply to this email directly, view it on GitHub <#231 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AX7D2AKGBMTWUEN5WJZOHILYRZLBZAVCNFSM6AAAAABAAQY7KCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNJVGU2DK> . You are receiving this because you commented.Message ID: ***@***.***>