Vite+Vue项目中Realm Web WASM版开发环境报错及解决

背景 #

• 为现有iOS应用配套开发基于MongoDB Realm/App Services的Web前端
• 选用预览版WASM版本realm@12.0.0-browser.2，因为标准Realm Web SDK仅支持认证和后端基础功能，WASM版本可实现设备同步及原生Realm对象交互
• 项目基于Vite初始化的Vue脚手架搭建，已按文档要求在vite.config.js中启用top-level-await，仅在App.vue中做基础导入：import Realm, { App } from "realm";

问题表现 #

• 执行vite build后通过vite preview预览生产构建产物时，无任何错误，功能正常
• 启动开发服务npm run dev后，浏览器控制台抛出一系列WASM相关错误：流式编译失败、MIME类型不匹配、WASM模块解析失败

解决方法 #

通过自定义Vite中间件，将WASM文件的请求重定向到node_modules/realm/dist目录下的对应文件。示例配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    middleware: [
      (req, res, next) => {
        if (req.url?.endsWith('.wasm')) {
          req.url = '/node_modules/realm/dist/realm.wasm'
        }
        next()
      }
    ],
    optimizeDeps: {
      esbuildOptions: {
        target: 'es2020',
        supported: {
          'top-level-await': true
        }
      }
    }
  }
})

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