0

I have a js library provided by a 3rd party. I want to import the module, and call a function, for any page that uses a common layout.

To do this, in my layout, my code looks like this:

@code {
    @inject IJSRuntime _js
    private IJSObjectReference Prettifier { get; set; }


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Prettifier = await _js.InvokeAsync<IJSObjectReference>("import", "./lib/Prettifier/prettify.js");

            await Prettifier.InvokeVoidAsync("prettyPrint");
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (Prettifier != null)
        {
            await Prettifier.DisposeAsync();
        }
    }
}

This does load the module, but the functions are not exported, so the call to InvokeVoidAsync fails, stating that prettyPrint is undefined. Also, I want to call the function on each page, but I don't want to define that logic on each page. Am I doing this right?

Jeremy
  • 44,950
  • 68
  • 206
  • 332
  • Why not just add the `import` in `app.js` or your base JavaScript file? Or use a C# equivalent solution? – Marius Dec 16 '22 at 12:13

0 Answers0