Blazor component JS isolation not finding js reference

Question

I created a Razor component library with the intent of housing some custom Blazor components.

One in particular is a wrapper over the Infragistics Dock Manager Web Component.

Within the component library project I created a folder under the wwwroot folder named dockmanager and added my javascript wrapper file dockmanger.js to it.

There are a number of JS module export functions that I've included within the dockmanager.js file to support my Dock Manager Blazor wrapper component.

Within the Dock Manager Blazor component OnAfterRenderAsync method I attempt to acquire an IJSObjectReference following this code ..

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (firstRender)
            {
                // add reference to dockmanager.js module
                _module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./dockmanager/dockmanager.js");
            }
        }
        catch(Exception ex)
        {

        }
    
    }

In a separate Blazor test project I reference my Razor component library and add the Dock Manager Blazor component to a test page.

When I navigate to the test page containing a reference to my custom component, at startup, I get an exception in the custom component OnAfterRenderAsync when I attempt to acquire the IJSObjectReference.

The exception is as follows:

Failed to fetch dynamically imported module: http://localhost:12203/dockmanager/dockmanager.js TypeError: Failed to fetch dynamically imported module: http://localhost:12203/dockmanager/dockmanager.js

I have triple checked the paths and they seem correct.

All Isolated JS examples are within a Blazor project however in my case I created the custom component within a Blazor component library and am referencing within a Blazor test project.

Should the path to the JS file be different?

John Kears John Kears · Accepted Answer · 2021-06-03T21:41:37

The solution was to alter the path as follows:

_module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/NextWare.UI.Components/dockmanager/dockmanager.js");

Where the NextWare.UI.Components refers to the name of the Blazor component library.

I hope this helps others!

Blazor component JS isolation not finding js reference

1 Answers