Blazor Server：导入JS库后无法立即调用方法的问题求助

问题根源 #

直接通过JSRuntime.InvokeVoidAsync("import", ...)导入ES模块时，模块内的函数处于模块作用域，不会自动暴露到全局（window），因此直接调用函数名会提示找不到。即使手动挂载到window，也可能因为模块执行时机与Blazor调用时机不匹配导致报错。

正确解决方案 #

1. 修改JS文件，导出目标函数 #

将普通函数改为ES模块导出：

export function functionName(strMsg){
    console.log(strMsg);
}

2. 在Blazor组件中导入模块并调用函数 #

使用IJSObjectReference获取模块引用，再通过该引用调用函数：

private IJSObjectReference? _jsModule;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 导入JS模块并获取模块对象
        _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/TestJS.js");
        // 通过模块对象调用目标函数
        await _jsModule.InvokeVoidAsync("functionName", "strMsg");
    }
}

// 组件销毁时释放模块，避免内存泄漏
public async ValueTask DisposeAsync()
{
    if (_jsModule != null)
    {
        await _jsModule.DisposeAsync();
    }
}

为什么之前的方法无效 #

• 直接调用import仅触发模块加载，但未获取模块引用，无法访问模块内的作用域成员。
• 使用Task.Run(...).Wait()属于错误用法：Blazor的JSRuntime必须在UI线程调用，同步等待可能导致死锁，且无法解决模块作用域的核心问题。
• 手动挂载window的方式不推荐，会污染全局作用域，且无法保证模块执行完成后window上的函数已就绪。

内容的提问来源于stack exchange，提问作者Mamw93