Blazor server tries to execute JS that is not available in the browser yet.

[djukic-marko]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Hello,

I think I saw similar issue here:

#22643

I have a verry simple method in JS, that is in main.js file.
Sometimes, when I try to call that method, I get the following error:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'eLClq9HWy0fSjAdA3LiDdH8ZWn4cYyuXBAIgES9cyB4'.
Microsoft.JSInterop.JSException: Could not find 'dobaviGuidKorisnikaIzCoockie' ('dobaviGuidKorisnikaIzCoockie' was undefined).
Error: Could not find 'dobaviGuidKorisnikaIzCoockie' ('dobaviGuidKorisnikaIzCoockie' was undefined).
    at https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:497
    at Array.forEach (<anonymous>)
    at i.findFunction (https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:465)
    at E (https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:2606)
    at https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:3494
    at new Promise (<anonymous>)
    at kt.beginInvokeJSFromDotNet (https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:3475)
    at https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:72086
    at Array.forEach (<anonymous>)
    at kt._invokeClientMethod (https://I_REMOVED_THIS_URL/_framework/blazor.server.js:1:72072)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Hermes.Shared.MainLayout.OnAfterRenderAsync(Boolean firstrender) in I_REMOVED_PATH\MainLayout.razor:line 127
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

This very simple method is declared inside main.js file, like this, and main.js file is included inside _Layout.cshtml like this:

<script src="_framework/blazor.server.js"></script>
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="~/js/main.js"></script>

The code inside MainLayout.razor line 127 looks like this:

protected override async Task OnAfterRenderAsync(bool firstrender) 
{
        var cookie = await JSRuntime.InvokeAsync<string>("dobaviGuidKorisnikaIzCoockie", new object[] { "GuidKorisnika" });
}

I don't get, how is it possible for Blazor to execute OnAfterRender method before all JS is downloaded.
As far as I understand, the browser won't start executing scripts until they are all downloaded.
Since the very same code works hundreds of times correctly, and happens only sometimes makes it a bit more confusing,

Is it possible that OnAfterRender is executed somehow before all JS is loaded?

Expected Behavior

Blazor waits for all JS declared inside Layout.cshtml to be downloaded before executing OnAfterRender.

Steps To Reproduce

N/A Happens sporadically. Most of the time, it works.

Exceptions (if any)

No response

.NET Version

.net 6.0

Anything else?

No response

[dotnet-policy-service]

Thank you for filing this issue. In order for us to investigate this issue, please provide a minimal repro project that illustrates the problem without unnecessary code. Please share with us in a public GitHub repo because we cannot open ZIP attachments, and don't include any confidential content.

[MackinnonBuck]

Thanks for reaching out, @djukic-marko.

Could you try moving the main.js script tag to be above the blazor.server.js one? If that doesn't fix the issue, a minimal repro project would be appreciated. Thanks!