Blazor Java script interop

Question

I have this javascript library that is written in TypeScript

(function(f) {
    if (typeof exports === "object" && typeof module !== "undefined") {
        module.exports = f()
    } else if (typeof define === "function" && define.amd) {
        define([], f)
    } else {
        var g;
        if (typeof window !== "undefined") {
            g = window
        } else if (typeof global !== "undefined") {
            g = global
        } else if (typeof self !== "undefined") {
            g = self
        } else {
            g = this
        }
        g.richTextEditor = f()
    }
}
)(function() {
    var define, module, exports;
    return (function() {
        function r(e, n, t) {
            function o(i, f) {
                if (!n[i]) {
                    if (!e[i]) {
                        var c = "function" == typeof require && require;
                        if (!f && c)
                            return c(i, !0);
                        if (u)
                            return u(i, !0);
                        var a = new Error("Cannot find module '" + i + "'");
                        throw a.code = "MODULE_NOT_FOUND",
                        a
                    }
                    var p = n[i] = {
                        exports: {}
                    };
                    e[i][0].call(p.exports, function(r) {
                        var n = e[i][1][r];
                        return o(n || r)
                    }, p, p.exports, r, e, n, t)
                }
                return n[i].exports
            }
            for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)
                o(t[i]);
            return o
        }
        return r
    }
    )()({
        1: [function(require, module, exports) {
            "use strict";
            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            exports.showHello = void 0;
            const greet_1 = require("./greet");
            function showHello(divName, name) {
                const elt = document.getElementById(divName);
                elt.innerText = (0,
                greet_1.sayHello)(name);
            }
            exports.showHello = showHello;

        }
        , {
            "./greet": 2
        }],
        2: [function(require, module, exports) {
            "use strict";
            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            exports.sayHello = void 0;
            function sayHello(compiler) {
                return `Hello from ${compiler}`;
            }
            exports.sayHello = sayHello;

        }
        , {}]
    }, {}, [1])(1)
});

and I am trying to execute showHello function in this library using JSInterop in Blazor using following code

public class TypeScriptInterop
{
    private readonly Lazy<Task<IJSObjectReference>> _moduleTask;

    public TypeScriptInterop(IJSRuntime jsRuntime)
    {
        _moduleTask = new(()=>
        jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Blazored.RichTextEditor/js/bundle.generated.js").AsTask());
    }

    public async ValueTask TsButtonClicked()
    {
        var javaScript = await _moduleTask.Value;
        if (_moduleTask.IsValueCreated)
        {
            Console.WriteLine("Captured Js");
        }
        await javaScript.InvokeVoidAsync("richTextEditor.showHello", "greeting", "Ubhaya");
    }
}

when I run this I get the error message saying

WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'richTextEditor.showHello' ('richTextEditor' was undefined).

but if I use <script src="./_content/Blazored.RichTextEditor/js/bundle.generated.js"></script> inside the index.html in blazor wasm project. it works correctly.

I am trying to create a Blazor component library. is there a way to do this in my current approach since I want to use JS isolation.