vite-plugin-wasm-pack

0.1.12 verified Mon Apr 27 auth: no javascript

Vite plugin (v0.1.12) that integrates Rust WebAssembly crates built with wasm-pack into Vite projects. It automatically serves local wasm-pack crates and supports npm-published wasm-pack packages (target web). The plugin wires up Vite's dev server and build pipeline to handle .wasm files and JavaScript glue code. It requires wasm-pack to be installed separately and the crate must be built beforehand. Compared to alternatives like vite-plugin-wasm, this plugin is specifically designed for wasm-pack output and offers simpler configuration for local crates.

Common errors

error Cannot find module './my-crate' or its corresponding type declarations. ↓

cause The wasm-pack output has not been built or the path is incorrect.

fix

Run 'wasm-pack build ./my-crate --target web' and ensure the path matches.

error Failed to parse source map: .../my-crate/pkg/my_crate.js ↓

cause The wasm-pack generated source map may be incomplete or missing.

fix

Disable source maps in Vite config or ignore the error; it is non-blocking.

error [vite] Internal server error: wasm-pack plugin: crate not found ↓

cause The crate path passed to wasmPack() is incorrect or does not contain a Cargo.toml.

fix

Provide an absolute or relative path to the crate directory containing Cargo.toml.

Warnings

gotcha Crate must be built manually with wasm-pack before starting the dev server. ↓

fix Run 'wasm-pack build ./my-crate --target web' before 'vite' or 'vite build'.

gotcha Only packages built with --target web are supported. npm packages built with other targets will not work. ↓

fix Rebuild the package with '--target web' or use a different plugin.

gotcha Vite may cache your wasm module. After modifying Rust code, the old module might be served. ↓

fix Clear Vite cache by deleting node_modules/.vite or restarting the dev server.

Install

npm install vite-plugin-wasm-pack

yarn add vite-plugin-wasm-pack

pnpm add vite-plugin-wasm-pack

Imports

default (wasmPack)

wrong

const wasmPack = require('vite-plugin-wasm-pack')

correct

import wasmPack from 'vite-plugin-wasm-pack'

ESM default export. CommonJS require may work but is not recommended.

vite config usage

wrong

import { wasmPack } from 'vite-plugin-wasm-pack'

correct

import wasmPack from 'vite-plugin-wasm-pack';
import { defineConfig } from 'vite';
export default defineConfig({ plugins: [wasmPack('./crate')] })

The plugin is a default export, not a named export.

TypeScript types
```
import wasmPack from 'vite-plugin-wasm-pack'
```
Package ships TypeScript types. No separate type import needed.

Quickstart

Shows how to configure Vite with a local wasm-pack crate and use its exports.

// vite.config.ts
import { defineConfig } from 'vite';
import wasmPack from 'vite-plugin-wasm-pack';

export default defineConfig({
  plugins: [wasmPack('./my-crate')]
});

// After building the crate with:
// wasm-pack build ./my-crate --target web

// In your frontend code:
import init, { greet } from './my-crate';
async function main() {
  await init();
  greet('World');
}
main();