omnysecurity
vite-plugin-wasm-esm
Vite plugin with SSR support to use wasm-pack generated packages as regular ES modules.
Installation
Install using your favorite package manager
npm i -D vite-plugin-wasm-esmUsage
To use this plugin, you must support await at module top level. This has
been supported in all major browsers for a while, but if you need
backwards compatibility, you can use vite-plugin-top-level-await.
After installation, add it to your vite config and specify all packages you want the plugin to handle:
// vite.config.js
import wasm from "vite-plugin-wasm-esm";
/** @type {import('vite').UserConfig} */
const config = {
plugins: [wasm(["@acme/wasm-calculator"])],
};
export default config;You probably also need to specify custom build targets, as the default targets provided by vite doesn't support await at the module top level:
// vite.config.js
import wasm from "vite-plugin-wasm-esm";
/** @type {import('vite').UserConfig} */
const config = {
plugins: [wasm(["@acme/wasm-calculator"])],
build: {
target: ["chrome89", "safari15", "firefox89"],
},
esbuild: {
target: ["chrome89", "safari15", "firefox89"],
},
};
export default config;All wasm packages handled by the plugin can be used as regular ES modules, both on the server during SSR and in the browser:
import { plus } from "@acme/wasm-calculator";
console.log(plus(1, 1)); // 3