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.
-
Clone the repo and install dependencies from the root folder:
yarn install
-
(can be skipped) Generate
wasm-package
fromwasm-crate
:cd wasm-crate wasm-pack build --out-dir ../wasm-package --target=bundler cd ..
-
(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.
-
๐ Run a Node.js script that uses the
wasm-package
:yarn workspace web-app exe scripts/wasm-package-answer.ts
-
๐ Run unit tests referring to the
wasm-package
:yarn workspace web-app test
Needs Jest
>=29.3.0
, see facebook/jest#13505. -
๐ 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.
โ ๏ธ Note the workaround in web-app/next.config.js. -
๐ Build and run production Next.js app:
yarn workspace web-app build yarn workspace web-app start