"JavaScript interop calls cannot be issued at this time" with OnAfterRenderAsync

[kamilk91]

System.InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being prerendered and the page has not yet loaded in the browser or because the circuit is currently disconnected. Components must wrap any JavaScript interop calls in conditional logic to ensure those interop calls are not attempted during prerendering or while the client is disconnected.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Blazored.LocalStorage.LocalStorageService.ContainKeyAsync(String key)
   at FantyAdminWeb.Pages.Index.OnAfterRenderAsync(Boolean firstRender) in C:\git\fanty-tranfer-admin\Pages\Index.razor:line 405
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

My onafterrenderasync tasks:

await localStorage.SetItemAsync("healthcheck", true);
        if (await localStorage.ContainKeyAsync("key"))
        {

            if (!string.IsNullOrEmpty(await localStorage.GetItemAsync<string>("key")))
            {
                amILogged = true;

            }
            if (amILogged)
            {
                try
                {

                    createDepositsChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    createUsersChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    createRegistrationsChart(DateTime.Now.AddDays(-7), DateTime.Now);
                }
                catch (Exception e)
                {
                    Console.WriteLine(e);
                }
            }
        }

create charts methods are using "key" object from localStorage. Error runs everytime when i go this site. Every GetItem is awaited.

If

                    createDepositsChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    createUsersChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    createRegistrationsChart(DateTime.Now.AddDays(-7), DateTime.Now);

are removed, all runs ok.

[chrissainty]

Hi, this look like an odd one. The stack trace is what I'd expect to see if you were trying to use LocalStorage with Blazor Server in an OnInitialized lifecycle method. But what you've said at the end of your issues suggests this isn't a problem with LocalStorage but with whatever is happening in the 3 method calls you've removed to make it work.

In order to investigate this, I'd need a repro with the minimum amount of code to reproduce the error. If you can get that up on GitHub somewhere I'll take a look.

[kamilk91]

@chrissainty it looks like this awful charts making problems. I coped with that with try-catching when loading data to charts, and if its not loaded correct, iam trying to do it again. Anyway, all tasks i'am doing with JSCharts now are after rendered, and only if its "FirstRender".

 if (await localStorage.ContainKeyAsync("key") && localStorage != null)
            {
                try
                {

                    await createDepositsChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    await createUsersChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    await createRegistrationsChart(DateTime.Now.AddDays(-7), DateTime.Now);
                    amILogged = true;
                }
...

Im not sure what magic happens when charts are during generating, but that point made ma a lot of issues. I'll close this thread, and give a little advice to people who working with JSCharts: Be patient.