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.

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

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

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 (patched Jest) referring to the wasm-package:

   yarn workspace web-app test

   For built-in support of WASM in Jest see facebook/jest#11011 (comment).

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).