public class JSMarkdownInterop
{
    IJSRuntime jsRuntime;

    public JSMarkdownInterop(IJSRuntime JSRuntime)
    {
        jsRuntime = JSRuntime;

        jsRuntime.InvokeAsync<IJSObjectReference>("import",
            "/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js");
    }

    public async ValueTask AddJS(string targetUrl)
    {
        await jsRuntime.InvokeVoidAsync("loadJs", targetUrl);
    }
}

The function loadJS is in the markdownEditor.js. So, in the component I added this code in the OnInitialized function

protected JSMarkdownInterop JSModule { get; private set; }

protected override void OnInitialized()
{
    if (JSModule == null)
        JSModule = new JSMarkdownInterop(JSRuntime);

    base.OnInitialized();
}

then, in the OnAfterRenderAsync I want to call the AddJS function to add some scripts.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);

    if (firstRender)
    {
        await JSModule.AddJS(easyMDEJS);
    }
}

I end up to have an error because apparently the fucntion loadJS was undefined.

How you can see in the above screenshot, there is the error but also the application added the script. Then, I think the application adds the script after the first render.

How can I delay the first render until the script is added? Or how can I add the script on time for the first render?

Update

I changed the JSMarkdownInterop like that

public class JSMarkdownInterop : IAsyncDisposable
{
    private readonly Lazy<Task<IJSObjectReference>> moduleTask;

    public JSMarkdownInterop(IJSRuntime jsRuntime)
    {
        moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import",
            "./_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js")
            .AsTask());
    }

    public async ValueTask AddJS(string targetUrl)
    {
        var module = await moduleTask.Value;
        await module.InvokeVoidAsync("loadJs", targetUrl);
    }
}

but I receive the same error.