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

[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!

[djukic-marko]

No Mr Buck, Thank you for helping me!

I didn't know the order of script tags would affect execution inside the browser in any way.
I could always use ASP protected browser storage to avoid this specific problem, but I would like to know the source of the problem so I don't repeat it again.

I will change the code, deploy the application, and update this issue. It might take a few days for the problem to occur because it happens only sometimes.

[halter73]

Thanks for the response. If you come up with a reliable repro of your issue, please feel free to open a new issue here with the details.