How to build browser app that imports Hedera SDK JS?

I'm attempting to build an app that imports @hashgraph/sdk

bun build --outdir ./dist --format 'esm' --target 'browser' ./src/dapp.ts

However, I get the following error:

4 | import { Buffer } from "buffer";
             ^
error: No matching export in "node:buffer" for import "Buffer"
    at /Users/user/code/hedera/hedera-code-snippets/dapp-hedera-sdk/node_modules/@hashgraph/cryptography/src/primitive/aes.browser.js:4:10

How can I work around this?

More detail:

I've put the SSCCE to reproduce this at: https://github.com/hedera-dev/hedera-code-snippets/blob/feat/dapp-hedera-sdk/dapp-hedera-sdk/

I've also tried bun add buffer, which installs the buffer shim from npm, however, that results in the same error as above.

UPDATE:

I have updated the demo to include Giuseppe Bertone's answer.

This issue does not seem to be a specific to the Hedera SDK JS. Instead, it seems to be an issue with the build tool, bun.

Consider using a different build tool instead, such as webpack. The tool vue-cli-service includes a build command that wraps webpack, and is able to build this successfully.

Modify the package.json file from your SSCCE to include this command:

vue-cli-service build --dest ./dist --formats 'umd' --target lib --name dapp src/dapp.ts

Full file should look like this:

{
  "type": "module",
  "scripts": {
    "dev": "npm run build-vue && npm run static && npm run serve",
    "static": "cp -r ./static/* ./dist/",
    "build-bun": "bun build --outdir ./dist --format 'esm' --target 'browser' ./src/dapp.ts",
    "build-vue": "vue-cli-service build --dest ./dist --formats 'umd' --target lib --name dapp src/dapp.ts",
    "serve": "npx http-server@14.1.1 ./dist -c-1 -p 8222"
  },
  "dependencies": {
    "@hashgraph/sdk": "2.43.0"
  },
  "devDependencies": {
    "@vue/cli": "5.0.8",
    "@vue/cli-plugin-babel": "5.0.8",
    "@vue/cli-service": "5.0.8"
  }
}