Getting error of JS function call

Question

I am getting error while loading, I created the js function and call into razor component on load it will throw error as not found or undefined in browser console. after throwing the error the js function works fine too. How I can fix this to stop this ?

code:

window.showTooltip = () => {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
};

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await IJSRuntime.InvokeVoidAsync("showTooltip");
    }

error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'showTooltip' ('showTooltip' was undefined).
      Error: Could not find 'showTooltip' ('showTooltip' was undefined).
          at https://localhost:44300/_framework/blazor.webassembly.js:1:328
          at Array.forEach (<anonymous>)
          at a.findFunction (https://localhost:44300/_framework/blazor.webassembly.js:1:296)
          at _ (https://localhost:44300/_framework/blazor.webassembly.js:1:2437)
          at https://localhost:44300/_framework/blazor.webassembly.js:1:3325
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:44300/_framework/blazor.webassembly.js:1:3306)
          at Object.St [as invokeJSFromDotNet] (https://localhost:44300/_framework/blazor.webassembly.js:1:59960)
          at _mono_wasm_invoke_js_blazor (https://localhost:44300/_framework/dotnet.6.0.11.87d6sxr7qp.js:1:195300)
          at wasm://wasm/00971d3e:wasm-function[219]:0x1a492
Microsoft.JSInterop.JSException: Could not find 'showTooltip' ('showTooltip' was undefined).
Error: Could not find 'showTooltip' ('showTooltip' was undefined).
    at https://localhost:44300/_framework/blazor.webassembly.js:1:328
    at Array.forEach (<anonymous>)
    at a.findFunction (https://localhost:44300/_framework/blazor.webassembly.js:1:296)
    at _ (https://localhost:44300/_framework/blazor.webassembly.js:1:2437)
    at https://localhost:44300/_framework/blazor.webassembly.js:1:3325
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:44300/_framework/blazor.webassembly.js:1:3306)
    at Object.St [as invokeJSFromDotNet] (https://localhost:44300/_framework/blazor.webassembly.js:1:59960)
    at _mono_wasm_invoke_js_blazor (https://localhost:44300/_framework/dotnet.6.0.11.87d6sxr7qp.js:1:195300)
    at wasm://wasm/00971d3e:wasm-function[219]:0x1a492
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Books.Client.Shared.TopMenu.OnAfterRenderAsync(Boolean firstRender) in D:\Projects\Stack\Books\Client\Shared\TopMenu.razor:line 108
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Answer 1

I have called it in index.html page.
and it work correct after showing error. Error shown when page reload first time.

site.js is file where js function written.
this is sequence in index.html before body tag close

 <script src="_framework/blazor.webassembly.js"></script>

    <script>navigator.serviceWorker.register('service-worker.js');</script>
  <script src="js/site.js"></script>

Answer 2

either the showToolTip define got a syntax error, or it defined after the blazor js code calls it.