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:

1// vite.config.js
2import wasm from "vite-plugin-wasm-esm";
3
4/** @type {import('vite').UserConfig} */
5const config = {
6	plugins: [wasm(["@acme/wasm-calculator"])],
7};
8
9export 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:

1// vite.config.js
2import wasm from "vite-plugin-wasm-esm";
3
4/** @type {import('vite').UserConfig} */
5const config = {
6	plugins: [wasm(["@acme/wasm-calculator"])],
7	build: {
8		target: ["chrome89", "safari15", "firefox89"],
9	},
10	esbuild: {
11		target: ["chrome89", "safari15", "firefox89"],
12	},
13};
14
15export 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:

1import { plus } from "@acme/wasm-calculator";
2
3console.log(plus(1, 1)); // 3