JavaScript interop calls cannot be issued at this time.

K1vs commented 1 year ago

Hi, I found that when using some components (eg modal and accordion), the following error can be found in the log (BlazorServer .NET7). This only happens the first time a page with these components is loaded. When you go to such a page on a loaded site, there is no problem.

Microsoft.AspNetCore.Server.Kestrel: Error: Connection id "0HMQL8SRMGJ30", Request id "0HMQL8SRMGJ30:00000001": An unhandled exception was thrown by the application.

System.InvalidOperationException: 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.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at BlazorBootstrap.Modal.DisposeAsync(Boolean disposing)
   at BlazorBootstrap.Base.BaseAfterRenderComponent.DisposeAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass74_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass74_0.<<Dispose>g__HandleAsyncExceptions|1>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.DisposeAsync()
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.ServiceProviderEngineScope.<DisposeAsync>g__Await|22_0(Int32 i, ValueTask vt, List`1 toDispose)
   at Microsoft.AspNetCore.Http.Features.RequestServicesFeature.<DisposeAsync>g__Awaited|9_0(RequestServicesFeature servicesFeature, ValueTask vt)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.<FireOnCompleted>g__ProcessEvents|242_0(HttpProtocol protocol, Stack`1 events)
The program '[25044] NET7.BlazorServerApp.exe' has exited with code 4294967295 (0xffffffff).

It is extremely easy to reproduce, in the example for dotnet7 add code to the component, for example SurveyPrompt:

<button class="btn btn-primary" @onclick="() => modal.ShowAsync()">Show me</button>

<Modal @ref="modal">
    <BodyTemplate>
        <button class="btn btn-primary" @onclick="() => modal.HideAsync()">Click me</button>
    </BodyTemplate>
</Modal>

@code {
    private Modal? modal;

    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public string? Title { get; set; }
}

Since this component is used on the start page, we will get a problem when starting the application.

K1vs commented 1 year ago

The problem also exists for .NET 6 Blazor Server.

gvreddy04 commented 1 year ago

@K1vs Thank you for trying BlazorBootstrap components. I'm not able to reproduce this issue in .NET 6 / .NET 7 Blazor Server. Please share a reproducable GitHub repo.

Othe Details: Blazor Bootstrap Version: _Host.cshtml file code:

K1vs commented 1 year ago

Hi, https://github.com/K1vs/blazorbootstrap-starter-templates/blob/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorServerApp/Pages/Index.razor this my modification to your project template. Just start NET7.BlazorServerApp and see Visual Studio debug window.

ashahabov commented 1 year ago

I have the same issue.

gvreddy04 commented 1 year ago

@adamshakhabov @K1vs

I'm not sure how to reproduce the issue. I see the behavior 1 out of 50 attempts. For this, you can set the autostart to false. Please change your _Host.cshtml file as follows in Blazor Server project:


<body>
  <component type="typeof(App)" render-mode="ServerPrerendered" />
  <script src="_framework/blazor.server.js" autostart="false" asp-append-version="true"></script>

  <!-- Other script files go here -->

  <script>
    Blazor.start();
  </script>
</body>

vikramlearning / blazorbootstrap

JavaScript interop calls cannot be issued at this time. #205

References