vite-plugin-wasm

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

Installation

This plugin supports from Vite 2.x to 6.x. Just install it:

1yarn add -D vite-plugin-wasm

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).

1import wasm from "vite-plugin-wasm";
2import topLevelAwait from "vite-plugin-top-level-await";
3
4export default defineConfig({
5  plugins: [
6    wasm(),
7    topLevelAwait()
8  ]
9});

If you are getting ESBuild errors of WASM files (In the format No loader is configured for ".wasm" files: node_modules/somepackage/somefile.wasm) with Vite < 3.0.3, please upgrade your Vite to >= 3.0.3 or upgrade this plugin to >= 3.1.0. A workaround is adding the corresponding imported module within node_modules to optimizeDeps.exclude, e.g.:

1export default defineConfig({
2  optimizeDeps: {
3    exclude: [
4      "@syntect/wasm"
5    ]
6  }
7});

Web Worker

To use this plugin in Web Workers. Add it (and vite-plugin-top-level-await if necessary) to worker.plugins. To support Firefox, don't use ES workers. leave worker.format default and use vite-plugin-top-level-await >= 1.4.0 (see also here):

1export default defineConfig({
2  plugins: [
3    wasm(),
4    topLevelAwait()
5  ],
6  worker: {
7    // Not needed with vite-plugin-top-level-await >= 1.3.0
8    // format: "es",
9    plugins: [
10      wasm(),
11      topLevelAwait()
12    ]
13  }
14});

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?).