Embed JavaScript files inside a .NET class library for Blazor project

I was just trying to export my own components to a library and re-discovered the most important Blazor WASM rule :

• Always clear the Client bin and obj folders.

What worked after copying the folders from the main project to the class library failed after a couple of executions. It seems the bin folder still contained some scripts so the paths that worked in the main project kept working until a full clean removed them.

If the script is stored in wwwroot/scripts and you use :

<script src="./_content/Client.BrowserInterop/scripts/screen-capture.js

Your methods should be available globally.

You should consider using JS isolation with side-by-side component scripts to avoid polluting the JS namespace and cluttering your wwwroot folder.

If your component is names ScreenCapture.razor, create a JS module in the same folder named ScreenCapture.razor.js. You can load this as a module in your component's OnAfterRenderAsync and call its exported methods :

private IJSObjectReference? module;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(module ==null)
    {
        var path = "./_content/Client.BrowserInterop/ScreenCapture.razor.js";
        module = await JS.InvokeAsync<IJSObjectReference>("import", path);
    }
}

    private ValueTask SetTextAsync(string text)
    {
        if (module is null)
        {
            return ValueTask.CompletedTask;
        }
        return module.InvokeVoidAsync("setValue", TextBox, text);
    }

Example

I was trying to put the code from this TagSelector component into my own RCL library using JS isolation to keep things tidy. The CSS and JS files are stored in wwwroot directly so normally I'd have to use :

<link rel="stylesheet" href="_content/MW.Blazor.TagSelector/styles.css" />
<script src="_content/MW.Blazor.TagSelector/interop.js"></script>

By renaming the files to TagSelector.razor.css and TagSelector.razor.js though, I was able to keep them together with the Razor file. I only need to use the TagSelector component now. The CSS and JS files are imported automatically.

The JS file was changed to a module :

export function getValue(element) {
    return element.value;
}

export function setValue(element, value) {
    element.value = value;
}

export function blur(element) {
    element.blur();
}

The module is loaded with :

var path = "./_content/MyLibraryName/TagSelector.razor.js";
module = await JS.InvokeAsync<IJSObjectReference>("import", path);

To call the exported setText method, the following wrapper is used:

    private ValueTask SetTextAsync(string text)
    {
        if (module is null)
        {
            return ValueTask.CompletedTask;
        }
        return module.InvokeVoidAsync("setValue", TextBox, text);
    }

Have you tried adding builder.WebHost.UseStaticWebAssets(); to your Program.cs of the Host Net Core app?

Are you getting a 404 error? try to modify your script source

<script src="_content/LinkScreen.Client.BrowserInterop/scripts/screen-capture.js" type="module"></script>

to

<script src="./_content/Client.BrowserInterop/scripts/screen-capture.js" type="module"></script>

as the offcial document explains:

The path segment for the current directory (./) is required in order to create the correct static asset path to the JS file. The {PACKAGE ID} placeholder is the library's package ID. The package ID defaults to the project's assembly name if isn't specified in the project file.

in my case ,it could work afer I modified the source:

I faced the same problem and I found the issue was different - CORS. I installed a plugin to enable CORS and it worked. Unfortunately the CORS error always showed up after showing the javascript (module not found/undefined) making it harder to establish the cause.