Posted on by 256hax

ReactでReferenceError: Buffer is not definedエラー

Solana AnchorのTSファイルをReactに移行していたときに発生したエラー。
Buffer関連のエラーはよく発生するため、いろいろな情報があったが、自分のケースは以下でしか解決できなかった。

補足： 今回はAnchorを例にしているが、Anchorに限らず、SolanaやMetaplexのweb3.jsをフロントエンドで使っていると、よく遭遇するエラーなので要注意

現象

以下のAnchorのTSコードをnpm startすると

    // Get the PDA that is assigned authority to token account.
    const [_pda, _nonce] = await PublicKey.findProgramAddress(
      [Buffer.from(anchor.utils.bytes.utf8.encode("escrow"))],
      program.programId
    );

以下のエラーが発生する。

ReferenceError: Buffer is not defined

原因

詳しく調査していないが、Nodeサーバーのみ対応していて、Reactには対応していないモジュールがあると発生する現象だった気がする。

対応

以下のように追記する。

import { Buffer } from 'buffer';

// @ts-ignore
window.Buffer = Buffer;

補足（エラー発生の条件）

発生条件

あるPJでは、エラー発生条件が極めて限られた場合のも発生していた。

  1. npm run devしたときは本エラーは発生しない（開発環境）
  2. npm run buildしたときも本エラーは発生しない（開発環境・本番環境）
  3. npm run buildしてNodeサーバーを動かしても本エラーは発生しない（本番環境）
  4. 上記のとおりサーバー起動後、TSファイルにある関数が実行されたときに初めて本エラーが発生する（本番環境）

原因

これは以下が原因と考えられる。

  • 本エラーは、ブラウザ側で実行して初めて再現できる
  • npm run devやnpm run buildだけだと、エラー発見ができない（ブラウザ側で実行しているわけではないため）