ちゃんとバージョンなんかを書いてませんが、タイトルとpackage.jsonを参照して判断ください。
TL;DR
ソースを参照。
Create React App + Symbol SDK example
Vite + React + Symbol SDK example
仕込み
NodeライブラリのPolyfillを設定
SDKがNodeライブラリに依存するため、Polyfillを組み込んでいます。
Polyfillするには色々な方法があるようですが、node-stdlib-browserが一番簡単だったので採用しました。
Vite版ではvite.config.tsに設定を追記します。
Create React App版ではreact-app-rewiredを用いて、webpack設定に割り込みます。
js-sdk(3.x系)がモジュール選択に失敗するのを回避
if (value instanceof ByteArray)
return new module[value.constructor.name](value.bytes);
value.constructor.nameという箇所が曲者で、rollupやwebpackのコンパイル時に、クラス名が変更されてしまうことにより、実行時に意図したコンストラクタ名が取得できず、モジュールの選択に失敗します。
これをクラスにプロパティで名前をつけることで回避しています。
Object.defineProperty(PublicKey, 'name', { value: 'PublicKey' })
なお、この処理はpatch-packageで適用するようにしてあります。
まだ対応が必要なクラスがあるかもしれませんので、発見次第更新していきます。
なお、サンプルではトランザクションのペイロード作成までしか確認していないので、このパッチによって発生する他の問題については不明です。
2.x系と3.x系のSDKを同居
一つのサンプルに両系統のSDKを動かす都合で、3.x系はパッケージ名の衝突を回避させています。
"symbol-sdk-3": "npm:symbol-sdk@^3.0.0",
import { facade, CryptoTypes } from 'symbol-sdk-3'
どちらか一方を使う場合は考慮しなくてよいでしょう。
BigIntについて
SDK 3.x系では大きな整数を扱うために、BigIntのシンタックスを使用しています。
BigIntは新しいブラウザならほぼ対応しているようですが、未対応のブラウザを考慮する場合は気をつけて下さい。
（気をつけるも何もどうしようもないか。2.x系を使うしかないですね）