Blazor WASM导入含外部依赖JS模块时调试崩溃求助

问题背景与代码 #

C#模块导入代码 #

public static async Task ImportModuleAsync()
{
    try
    {
        await JSHost.ImportAsync("Firebase", "/js/Firebase.js");
        IsModuleImported = true;
    }
    catch (Exception ex)
    {
        Debugger.Break();
        string msg = ex.Message;
        JSTools.Debug(msg);
    }
}

组件调用代码 #

protected override async Task OnInitializedAsync()
{
    await JSTools.ImportModuleAsync();
}

正常运行的JS模块 #

export function blabla(){return "bla";}

引发崩溃的JS模块（添加Firebase导入后） #

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";

export function blabla(){
   return "bla";
}
/*etc*/

问题现象 #

• 仅包含自定义导出函数时，程序运行正常
• 添加Firebase的远程import语句后，ImportAsync方法触发程序崩溃，退出错误码0xfffffff且无额外报错信息
• 无调试模式（Ctrl+F5）下程序可正常运行，但调试模式下无法使用

解决方法 #

方法1：改用全局脚本引入Firebase #

1. 在项目的index.html中直接引入Firebase的兼容全局版本脚本：

<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script>
<!-- 按需添加其他Firebase模块的compat版本，比如auth、firestore等 -->
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-auth-compat.js"></script>

2. 修改Firebase.js模块，直接使用全局的firebase对象，移除内部的import语句：

export function initializeFirebase() {
    const firebaseConfig = {
        // 填入你的Firebase项目配置
    };
    return firebase.initializeApp(firebaseConfig);
}

export function blabla(){
   return "bla";
}

3. 保持原有的C#导入逻辑不变，调试模式下即可正常运行。

方法2：打包本地Firebase依赖 #

1. 通过npm安装指定版本的Firebase：

npm install firebase@9.15.0

2. 使用Vite、Webpack等打包工具，将Firebase依赖和你的自定义代码打包成一个独立的JS模块，确保所有依赖都被内嵌到打包文件中，避免运行时的远程依赖加载。
3. 将打包后的JS文件放到wwwroot/js目录下，修改C#中的导入路径指向该打包文件。

方法3：调整调试配置 #

在项目的launchSettings.json中，添加调试环境变量以禁用JS对象缓存：

"profiles": {
  "YourProjectName": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development",
      "BLZ_DEBUG_DISABLE_JSOBJECT_CACHING": "1"
    }
  }
}

保存配置后重启调试会话，尝试重新导入模块。

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