How to use Astro with WASM in TypeScript

Question

I would like to use a Web-Assembly Module that I wrote in Rust in my Astro App. I am using TypeScript and the following astro.config.mjs:

import { defineConfig } from "astro/config";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [wasm(), tailwind(), react()],
  vite: {
    plugins: [wasm(), topLevelAwait()],
  },
});

The code using the wasm in a file functions.ts looks like this:

import { greet } from "dices";

export function hello(): void {
  let g: string = greet();
  console.log(g);
}

Type checking all works fine, however when running with npm run dev I encounter the following error:

error   WebAssembly.instantiate(): BufferSource argument is empty
CompileError: WebAssembly.instantiate(): BufferSource argument is empty        
    at Module.__vite_ssr_exports__.default (/__vite-plugin-wasm-helper:31:14)  
    at processTicksAndRejections (node:internal/process/task_queues:96:5)      
    at async eval (/pkg/dices_bg.wasm:6:28)
    at async instantiateModule (file:///D:/code/web-dev/dice-calculator-frontend/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:53445:9)

When I setup a new Vite project via npm create vite@latest with React and TypeScript with the same functions.ts file and the following vite.config.ts everything works and I can use the functions from the wasm module without issues.

vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
});

Has anyone got WASM working with Astro? I am a bit confused because Astro uses Vite under the hood, but what works fine with just Vite, does not seem to work with Astro.

score 2 · Answer 1 · answered Nov 20 '22 at 15:06

I found that using

<DistributionCalculatorWrapper client:only="react" />

instead of

<DistributionCalculatorWrapper client:load />

is a workaround that will work for me. I guess there is some issue that Node.js cannot use the wasm serverside, but if we explicitly have the components using wasm functions being only client side rendered with client:only="react" it works.

How to use Astro with WASM in TypeScript

1 Answers1