Failed to fetch dynamically imported module on Blazor JS Interop

Question

I try to use validator.js via JSInterop in Blazor but got an error Unhandled exception rendering component: Failed to fetch dynamically imported module: https://localhost:7027/_content/.../dist/JSInteropModule.js when try to import the library.

I installed validator.js using libman (unpkg) then create an interface for js interop as:

C# code:

private readonly Lazy<Task<IJSObjectReference>> jsModuleTask;
private readonly IJSRuntime jsRuntime;

public InteropExperimentJS(IJSRuntime jsRuntime)
{
    string scriptPath;
    this.jsRuntime = jsRuntime;

    jsModuleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
        "import", $"./dist/JSInteropModule.js").AsTask());
}

public async ValueTask<bool> InvokeFunctionWithLibs(string email, CancellationToken cancellationToken = default)
{
    var jsModule = await jsModuleTask.Value.ConfigureAwait(false);
    return await jsModule.InvokeAsync<bool>("validateEmail", cancellationToken, email).ConfigureAwait(false);
}

TS code:

import { validator } from "./lib/validator/validator.js";

const simpleAlert = function (input: string): void {
    alert(input);
};

const returnValue = function (input: string): string {
    return input;
};

const validateEmail = function (email: string): boolean {
    return validator.isEmail(email);
};

export { simpleAlert, returnValue, validateEmail };

The problem is when I reference the validator.js separated with tag without import in my TS file every function is worked well. But when I use the import statement I got return error Unhandled exception rendering component: Failed to fetch dynamically imported module: https://localhost:7027/_content/.../dist/JSInteropModule.js. How can I use the validator.js with import in my TS code.