I have a Blazor .Net Maui hybrid app. I am trying to import my javascript file using IJSObjectReference. No matter where I put the file and how I try to reference the path, I get the “Failed to fetch dynamically imported module” error in the developer console.

Here is the code I have written:

private IJSObjectReference? module;

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
     if (firstRender)
     {
         module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./MusicPlayer.js");
     }
 }

I have placed it in the Blazor Class libary under wwwroot and tried “./MusicPlayer.js”. I have placed it in the wwwroot under a js folder and tried “./js/MusicPlayer.js”. I have placed it in the .Net Maui Native application wwwroot folder “./MusicPlayer.js”. I have removed the ./. No luck on any of these. All of the examples on the web seem to be for Blazor app not hybrid, so not sure if there is something special about that. I even tried to create a MusicPlayer.razor.js file in the component folder where my razor page is and it cannot find it.