返回

Vite + Vue 使用 Realm Web SDK 时的 WASM 错误：全面解决指南

vue.js

解决 Vite + Vue 中使用 Realm Web SDK 时遇到的 WASM 错误

问题概要

在使用 Vite 和 Vue 构建的应用程序中集成 Realm Web SDK 的 Web Assembly 版本时，开发人员可能会遇到以下 WASM 错误：

[Error] wasm streaming compile failed: TypeError: Unexpected response MIME type. Expected 'application/wasm'
[Error] falling back to ArrayBuffer instantiation
[Error] failed to asynchronously prepare wasm: CompileError: WebAssembly.Module doesn't parse at byte 0: module doesn't start with '\0asm'
[Error] Aborted(CompileError: WebAssembly.Module doesn't parse at byte 0: module doesn't start with '\0asm')

解决方法

虽然这些错误在构建和预览时不会出现，但为了在开发过程中消除它们，有以下两种方法：

  1. 使用自定义中间件：

在 vite.config.js 中添加以下中间件代码：

const path = require('path');

module.exports = {
  server: {
    middlewareMode: 'middleware',
    middleware: [
      {
        match: '/realm-js-wasm.wasm',
        handle: (req, res) => {
          const wasmPath = path.join(__dirname, 'node_modules/realm/dist', path.basename(req.url));
          return fs.createReadStream(wasmPath).pipe(res);
        },
      },
    ],
  },
};
  1. 将 WASM 路径重定向到 Realm 文件夹：

在上述中间件代码中，将 const wasmPath 修改为：

const wasmPath = path.join(__dirname, 'node_modules/realm/dist', path.basename(req.url));

工作原理

自定义中间件拦截了对 /realm-js-wasm.wasm 文件的请求，并将它们重定向到 node_modules/realm/dist 文件夹中的实际 .wasm 文件。这确保了服务器可以正确加载和执行 WASM 文件，从而消除开发过程中的错误。

其他注意事项

  • 确保已在 vite.config.js 中启用了顶级 await。
  • realm.js 文件应从 node_modules/realm 加载。
  • 如果仍遇到问题，请尝试清除浏览器缓存和重新加载应用程序。

常见问题解答

1. 为什么在开发时会出现这些错误，但在构建时不会？

错误发生在加载 WASM 文件的初始开发阶段，但在构建过程中，WASM 已被编译并优化为 JavaScript，因此不会出现这些错误。

2. 使用自定义中间件和重定向路径有什么区别？

自定义中间件提供了对请求处理的更多控制，允许拦截和重定向其他类型的请求。重定向路径更简单，但可能无法处理所有情况。

3. 如何检查中间件是否正在正确工作？

在浏览器开发工具的网络选项卡中，检查 /realm-js-wasm.wasm 请求的响应是否为 application/wasm。

4. 我应该在生产环境中使用这些解决方案吗？

这些解决方案仅适用于开发环境。在生产环境中，应使用 Realm Web SDK 的 JavaScript 版本。

5. 是否还有其他解决此错误的方法？

虽然本文中介绍的方法是推荐的解决方案，但还可以尝试更新浏览器、使用不同的版本 Realm Web SDK 或查看 GitHub 上的官方问题追踪器以获取更多建议。