VSCode Web扩展加载wasm模块报failed to fetch错误如何解决

核心报错根因排查顺序 #

• 首先验证打包产物是否包含WASM文件：将生成的.vsix安装包后缀改为.zip解压，检查包内是否存在目标my-ext.wasm文件。90%以上的同类报错都是因为.wasm二进制文件未被纳入打包范围：检查package.json的files字段，必须显式添加WASM所在目录的匹配规则，例如"server/pkg/**"，vsce默认的打包排除规则会自动忽略未声明的二进制类型文件。
• 验证测试环境静态资源配置：使用@vscode/test-web测试时，默认静态服务未配置.wasm后缀对应的MIME类型，会导致浏览器拦截WASM请求返回fetch失败，需要在测试配置中补充MIME映射：

module.exports = {
  mimeTypes: {
    '.wasm': 'application/wasm'
  }
}

• 验证路径解析逻辑：new URL("my-ext.wasm", import.meta.url)的写法本身符合Web扩展规范，但要保证运行时JS文件和WASM文件的相对路径与代码中写的一致。WASM-pack编译产物默认在JS同目录查找同名WASM文件，跨目录引用时不要自行拼接路径，直接在WASM产物的入口JS中调用初始化逻辑即可，避免路径偏移。
• 验证CSP规则限制：VSCode Web扩展运行上下文有严格的内容安全策略，WASM加载需要对应上下文允许wasm-unsafe-eval权限，不要跨协议（比如从扩展上下文请求http/本地file协议资源）拉取WASM，否则会直接抛出无详情的TypeError: failed to fetch。
• 修正WASM初始化调用方式：使用wasm-pack build --target web编译的产物不需要手动编写fetch逻辑，直接导入生成的入口JS调用init()即可，内置逻辑会自动解析同目录WASM路径，手动重复fetch容易出现请求上下文错误，正确调用示例：

import init, { 对应Rust导出方法 } from './pkg/my_ext.js';
// 无参数调用时自动匹配同目录WASM文件
await init();

公开参考实现 #

• 微软官方维护的vscode-wasm仓库提供了完整的Web端WASM加载实现，覆盖LSP服务、调试适配器等多种场景，和lsp-web-extension-sample的架构完全兼容，可直接对照配置修改。
• lsp-web-extension-sample官方仓库的wasm分支提供了最小可运行的Rust+WASM+LSP Web扩展示例，包含完整的打包、测试配置。
• wasm-bindgen官方文档包含VSCode Web扩展适配专项说明，核心注意点和上述排查逻辑一致。

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