README.md

WASM + TypeScript + ESM in Node.js, Jest and Next.js

This repo contains a web app that depends on an NPM package with WASM, TypeScript and native ESModules. WASM code is successfully used in a Node.js script, a Jest test and a Next.js app within a page and an API route.

The demo was created while working on blockprotocol/blockprotocol and hashintel/hash.

Prerequisites

• Node.js v16 or higher
• Yarn
• Rust and wasm-pack (unless you want to skip steps 2 and 3 of the demo)

Demo steps

1. Clone the repo and install dependencies from the root folder:

   yarn install

2. (can be skipped) Generate wasm-package from wasm-crate:

   cd wasm-crate
   wasm-pack build --out-dir ../wasm-package --target=bundler
   cd ..

3. (can be skipped) Tweak wasm-package:

   ## Enable native ESM in package.json
   yarn replace-in-file "/\"module\":/" "\"type\": \"module\", \"main\":" wasm-package/package.json --isRegex
   yarn prettier --write wasm-package/package.json
   
   ## Remove autogenerated .gitignore
   rm wasm-package/.gitignore

   This step won’t be necessary when rustwasm/wasm-pack#1061 is merged and released.

4. 🎉 Run a Node.js script that uses the wasm-package:

   yarn workspace web-app exe scripts/wasm-package-answer.ts

5. 🎉 Run unit tests referring to the wasm-package:

   yarn workspace web-app test

   Needs Jest >=29.3.0, see facebook/jest#13505.

6. 🎉 Run Next.js dev server and check if wasm-package works there too:

   yarn workspace web-app dev

   Open localhost:3000 and localhost:3000/api/wasm-package-answer to see the result.

   ---

7. ⚠️ Build and run production Next.js app:

   yarn workspace web-app build
   yarn workspace web-app start

   ⚠️ I could not get WASM working in API routes. Requesting localhost:3000/api/wasm-package-answer returns Internal Server Error.

   Upstream discussion: vercel/next.js#29362 (comment).