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-esm

Usage

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