Trying to import javascript file to IJSObjectReference in Blazor Hybrid app fails with Failed to fetch dynamically imported module

Question

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.

Answer 1

From the doc,

When the external JS file is supplied by a Razor class library, specify the module's JS file using its stable static web asset path: ./_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)}:

The package ID defaults to the project's assembly name if isn't specified in the project file.

The {SCRIPT PATH AND FILE NAME (.js)} placeholder is the path and file name under wwwroot.

So if you just place the js file in the wwwroot folder of your class library, then the path should be,

JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/{library assembly name}/MusicPlayer.js");

For more info, you may refer to JavaScript isolation in JavaScript modules.