metaplex.makeを実行すると「global is not defined」「undefined reading ‘prototype’」エラー

現象

React x Viteのまっさらな状態でmetaplex.makeを実行すると以下、2点のエラーが発生。

react Uncaught ReferenceError: global is not defined
Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)

App.tsx(対象箇所のみ抜粋)

  const getMyNfts = async () => {
    const connection = new Connection(clusterApiUrl('devnet'));

    const metaplex = Metaplex.make(connection)
      .use(guestIdentity())
      .use(bundlrStorage());

    const owenerPublicKey = new PublicKey('55AfqEL3TC9mpkDZ63UCgDrzPcMQd5aZtDegfQCWQ5tK'); // Devnet
    const myNfts = await metaplex
      .nfts()
      .findAllByOwner({ owner: owenerPublicKey });

    console.log('myNfts =>', myNfts);
  }

原因

Metaplexの実行に必要なモジュールや設定が足りていないため。

対応

Metaplex公式の Getting Started with Metaplex and Vite を参考にモジュールのインストールと設定を行う。

備考

MetaplexをNode上だけで扱う場合(例:Expressやts-nodeで実行するなど)は、特に必要ないので、いつも忘れがちになってしまう。
Reactなどのフロントエンドに実装する場合は、 Metaplex公式サイト を見て、不足モジュールと追加設定が必要になるため、要注意。