vite-wasm-setup

name	vite-wasm-setup
description	Guide to configuring Vite for Miden WASM applications. Covers the midenVitePlugin() setup, COOP/COEP headers, production deployment headers, TypeScript compatibility, and troubleshooting common Vite + WASM issues. Use when setting up a new Miden frontend, debugging build or runtime errors related to WASM or Vite configuration, or deploying to production.

Vite + WASM Configuration for Miden

Required vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { midenVitePlugin } from "@miden-sdk/vite-plugin";

export default defineConfig({
  plugins: [react(), midenVitePlugin({ crossOriginIsolation: true })],
});

Pass crossOriginIsolation: true explicitly. The Miden WASM client uses SharedArrayBuffer via Rust atomics, which is only available when the page is cross-origin-isolated (COOP same-origin + COEP require-corp). Don't rely on the plugin's own default — it has shifted across releases, so the template's config is source-of-truth.

If your app must host third-party iframes, OAuth popups, or other cross-origin resources that don't emit require-corp, either (a) embed them via credentialless COEP as a workaround (see the Gotchas section below), or (b) set and accept that Miden client operations won't work on that route.