vite-plugin-wasm

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vite-plugin-wasm
4333.0.015 days ago7 months agoMinified + gzip package size for vite-plugin-wasm in KB

Readme

vite-plugin-wasm
Test Status npm Commitizen friendly code style: prettier License
Add WebAssembly ESM integration (aka. Webpack's asyncWebAssembly) to Vite and support wasm-pack generated modules.

Installation

Now this plugin supports both Vite 2.x and 3.x. Just install it:
yarn 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).
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [
    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?).