Blazor JS隔离模式下JSInterop调用提示TestClass未定义问题求助

安全阿岳

2026-8-20

Blazor调用JS模块方法报错的解决办法

错误原因

你遇到的Error: Could not find 'TestClass.sayHello' ('TestClass' was undefined)问题，核心原因是ES模块有独立的作用域：

你的JS代码把TestClass实例挂载到了全局window对象上，所以直接用JsRuntime.InvokeAsync时，能访问到全局作用域里的TestClass；
但当你通过module.InvokeAsync调用时，是在模块的局部作用域内查找TestClass.sayHello，而你的模块并没有导出TestClass或其实例，所以找不到对应的成员。

解决方法

方法一：修改JS模块，导出目标实例/方法

调整JS文件，把需要调用的实例或方法导出，让模块内部能访问到：

方式1：导出类实例

class TestClass {
  sayHello(s) {
    console.log("Hello " + s);
    return true;
  }
}

// 创建实例并导出
export const testInstance = new TestClass();
// 同时保留全局挂载（如果有其他地方需要全局访问）
window[TestClass.name] = testInstance;

对应的C#调用代码：

public async ValueTask<bool> SayHello(string name)
{
    var module = await moduleTask.Value;
    // 调用模块导出的实例方法
    return await module.InvokeAsync<bool>("testInstance.sayHello", name);
}

方式2：直接导出方法

class TestClass {
  sayHello(s) {
    console.log("Hello " + s);
    return true;
  }
}

const testInstance = new TestClass();
// 导出封装后的方法
export function sayHello(s) {
  return testInstance.sayHello(s);
}
// 保留全局挂载
window[TestClass.name] = testInstance;

对应的C#调用代码：

public async ValueTask<bool> SayHello(string name)
{
    var module = await moduleTask.Value;
    // 直接调用模块导出的方法
    return await module.InvokeAsync<bool>("sayHello", name);
}