vite-plugin-wasm

Add WebAssembly ESM integration (aka. Webpack's asyncWebAssembly) to Vite and support wasm-pack generated modules.

Installation

For Vite 3.x (latest), please use 2.x version of this plugin (pure ESM, since Vite is pure ESM):

yarn add -D vite-plugin-wasm@^2

For Vite 2.x (latest), please use 1.x version of this plugin:

yarn add -D vite-plugin-wasm@^1

Usage

You also need the vite-plugin-top-level-await plugin unless you target very modern browsers only (i.e. set build.target to esnext).

import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [
    /**
     * Since 2.x version of this plugin, the `filter` option has been removed.
     * 
     * For 1.x (with Vite 2.x):
     *   By default ALL `.wasm` imports will be transformed to WebAssembly ES module.
     *   You can also set a filter (function or regex) to match files you want to transform.
     *   Other files will fallback to Vite's default WASM loader (i.e. You need to call `initWasm()` for them). 
     *   ```js
     *   wasm({
     *     filter: /syntect_bg.wasm$/
     *   })
     *   ```
     */
    wasm(),
    topLevelAwait()
  ]
});

If you are getting ESBuild errors of WASM files (In the format No loader is configured for ".wasm" files: node_modules/somepackage/somefile.wasm), add the corresponding imported module within node_modules to optimizeDeps.exclude, e.g.:

export default defineConfig({
  optimizeDeps: {
    exclude: [
      "@syntect/wasm"
    ]
  }
});

See the issue #8 and upstream discussion vitejs/vite#9256.

Notes

TypeScript typing is broken. Since we can't declare a module with Record<string, any> as its named export map. Your import ... from "./module.wasm"; will still got Vite's bulit-in typing, but the transformed code is fine. So just use an asterisk import import * as wasmModule from "./module.wasm" and type assertion (you have typing for your WASM files, right?).