From 1ffee2d25e8259b044d7b7bb8dbed595371fdf59 Mon Sep 17 00:00:00 2001
From: mk <mk>
Date: Mon, 23 Mar 2026 23:50:55 -0300
Subject: [PATCH] fix: serve VAD assets from node_modules in dev mode

vite-plugin-static-copy only copies files at build time; in dev the /vad/
requests fell through to the SPA 404 handler, returning text/html which
caused the WASM magic-number validation error. Add a configureServer
middleware that serves the worklet bundle, ONNX model, and WASM files
directly from node_modules with correct MIME types during development.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 vite.config.ts | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/vite.config.ts b/vite.config.ts
index 792f5327..5b64430b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,6 +22,7 @@ import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react";
 import { realpathSync } from "fs";
 import * as fs from "node:fs";
+import * as path from "node:path";
 
 // https://vitejs.dev/config/
 // Modified type helper from defineConfig to allow for packageType (see defineConfig from vite)
@@ -35,7 +36,39 @@ export default ({
   // In future we might be able to do what is needed via code splitting at
   // build time.
   process.env.VITE_PACKAGE = packageType ?? "full";
+  // Serve VAD assets (ONNX model, WASM, worklet bundle) from node_modules
+  // during dev. vite-plugin-static-copy only runs during build.
+  const serveVadAssets: PluginOption = {
+    name: "serve-vad-assets",
+    configureServer(server) {
+      const mimeTypes: Record<string, string> = {
+        ".wasm": "application/wasm",
+        ".onnx": "application/octet-stream",
+        ".js": "application/javascript",
+        ".mjs": "application/javascript",
+      };
+      const sourceDirs = [
+        path.join(process.cwd(), "node_modules/@ricky0123/vad-web/dist"),
+        path.join(process.cwd(), "node_modules/onnxruntime-web/dist"),
+      ];
+      server.middlewares.use("/vad", (req, res, next) => {
+        const filename = (req.url ?? "/").replace(/^\//, "").split("?")[0];
+        for (const dir of sourceDirs) {
+          const filePath = path.join(dir, filename);
+          if (fs.existsSync(filePath)) {
+            const mime = mimeTypes[path.extname(filePath)] ?? "application/octet-stream";
+            res.setHeader("Content-Type", mime);
+            fs.createReadStream(filePath).pipe(res);
+            return;
+          }
+        }
+        next();
+      });
+    },
+  };
+
   const plugins: PluginOption[] = [
+    serveVadAssets,
     viteStaticCopy({
       targets: [
         {