Blazor Component Javascript Errors (Microsoft.JSInterop.JSException)

Question

I have a JavaScript function stored in a separate JS file that sets the page title for a new Blazor app that looks like this:

window.setTitle = (title, icon) => {

    //title
    document.title = title;
    $("#page_title").html(title);

    //page icon
    $("#page_icon").removeClass().addClass('fad fa-' + icon + ' fa-2x');
}

On a cold startup of the app, when hitting it through a browser and it hasn't been hit in a little while, I'll end up with the following in the console:

Microsoft.JSInterop.JSException: Could not find 'setTitle' ('setTitle' was undefined).
Error: Could not find 'setTitle' ('setTitle' was undefined).
    at https://example.com/_framework/blazor.webassembly.js:1:1287
    at Array.forEach (<anonymous>)
    at e.findFunction (https://example.com/_framework/blazor.webassembly.js:1:1247)
    at b (https://example.com/_framework/blazor.webassembly.js:1:2989)
    at https://example.com/_framework/blazor.webassembly.js:1:3935
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://example.com/_framework/blazor.webassembly.js:1:3908)
    at Object.w [as invokeJSFromDotNet] (https://example.com/_framework/blazor.webassembly.js:1:64218)
    at _mono_wasm_invoke_js_blazor (https://example.com/_framework/dotnet.5.0.6.js:1:190800)
    at do_icall (<anonymous>:wasm-function[10596]:0x194e4e)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at App.Web.Portal.Client.Shared.PageTitle.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
d.printErr @ blazor.webassembly.js:1

The part that confuses me is, if I just do a hard refresh (CTRL + Shift + R), then everything loads up perfectly fine and runs great without any changes or deployments. Given that, I don't really know what to do or where to look on how to correct this.

Has anyone else seen this before or have any tips on how to prevent it?

Answer 1

This happens when the page is not completely rendered and the connection active to the server to handle the events etc. I have found it's best to call JSInterop , initiated, from the page after it's rendered and ready instead of in C# at my leisure to avoid things like this because it can be a headache with little error information on what's causing it.