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.
moduleTaskapproach that seemingly imports a JavaScript bundle when a button is clicked? Never seen such a thing. Also learn.microsoft.com/en-us/aspnet/core/blazor/… does not document this. The solution here would surely be to add the js file to theheadsection of your html page or any other supported location, so that it is correctly loaded when you open the page.