Blazor中使用JavaScript模块报错，如何实现JS模块化组织？

问题根源在于ES模块的作用域是模块私有，默认不会将内部函数挂载到全局window对象上，而Blazor的IJSRuntime是通过访问全局作用域来调用JS函数的，所以直接改模块后找不到Increment函数。

解决步骤 #

1. 将需要被Blazor调用的函数暴露到全局作用域
   修改main.js，在模块末尾把Increment函数挂载到window对象上，让Blazor能访问到：

   import { DisplayVal } from "./module1.js";
   
   function Increment(value) {
       value++;
       DisplayVal(value);
       return value;
   }
   
   // 关键：把函数暴露到全局window对象
   window.Increment = Increment;
   

2. 确认模块导入路径正确
   确保./module1.js的相对路径和main.js的文件位置匹配：

   • 如果main.js在wwwroot/Scripts下，那么./module1.js对应wwwroot/Scripts/module1.js，要保证两个文件在同一目录。

3. 保留正确的script标签配置
   index.html中的配置无需额外修改，保持type="module"和autostart="false"即可：

   <script type="module" src="/Scripts/main.js" autostart="false"></script>
   

为什么原来的非模块方式能正常工作？ #

普通JS脚本（不带type="module"）会自动将顶级函数挂载到全局window对象，所以Blazor的IJSRuntime可以直接通过函数名调用。改成ES模块后，所有顶级变量/函数都被限制在模块内部，必须手动暴露到全局才能被外部（比如Blazor）访问。

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