Skip to content

hasharchives/wasm-ts-esm-in-node-jest-and-nextjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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.

    ⚠️ Note the workaround in web-app/next.config.js.

  7. 🎉 Build and run production Next.js app:

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

About

A Wasm/TS/ESM in Node/Jest/Next.js demo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published