Uncaught (in promise) ReferenceError: Buffer is not defined. Using Phantom Wallet, Solana and React to make a transaction

Question

I created a simple CRA app to figure out how to use the Phantom wallet to make Solana transactions(I still don't know If that is even possible). I referenced two Stackoverflow questions source and source and came up with a somewhat working code as in the airdrop is working perfectly fine but the main transaction is not.

This is my code:

import "./App.css";
import { useEffect, useState } from "react";
const web3 = require("@solana/web3.js");

function App() {
  const [provider, setProvider] = useState(null);
  const [walletKey, setWalletKey] = useState(null);

  const getProvider = () => {
    if ("solana" in window) {
      const provider = window.solana;
      if (provider.isPhantom) {
        return provider;
      }
    }
  };

  const connectWallet = async () => {
    const provider = getProvider();
    if (provider) {
      try {
        const response = await provider.connect();
        const pubKey = await provider.publicKey;
        console.log(pubKey);
        setProvider(provider);
        setWalletKey(response.publicKey.toString());
      } catch (err) {
        // { code: 4001, message: 'User rejected the request.' }
      }
    }
  };

  useEffect(() => connectWallet, []);

  const airDropSol = async (connection, publicKey) => {
    try {
      const airdropSignature = await connection.requestAirdrop(
        publicKey,
        web3.LAMPORTS_PER_SOL
      );

      const latestBlockHash = await connection.getLatestBlockhash();

      // Confirming that the airdrop went through
      await connection.confirmTransaction({
        blockhash: latestBlockHash.blockhash,
        lastValidBlockHeight: latestBlockHash.lastValidBlockHeight,
        signature: airdropSignature,
      });
      console.log("Airdropped");
    } catch (error) {
      console.error(error);
    }
  };

  async function transferSOL() {
    //Changes are only here, in the beginning
    const phantomProvider = provider;
    if (!phantomProvider) {
      console.log("No provider found", phantomProvider);
    }
    const pubKey = await phantomProvider.publicKey;
    console.log("Public Key: ", pubKey);

    // Establishing connection
    var connection = new web3.Connection(web3.clusterApiUrl("devnet"));

    // I have hardcoded my secondary wallet address here. You can take this address either from user input or your DB or wherever
    var recieverWallet = new web3.PublicKey(
      "Wallet Key I want to send SOL to here"
    );

    // Airdrop some SOL to the sender's wallet, so that it can handle the txn fee
    airDropSol(connection, pubKey);

    console.log("WORKED 1");
    const transaction = new web3.Transaction();
    const instructions = web3.SystemProgram.transfer({
      fromPubkey: pubKey,
      toPubkey: recieverWallet,
      lamports: web3.LAMPORTS_PER_SOL, //Investing 1 SOL. Remember 1 Lamport = 10^-9 SOL.
    });
    transaction.add(instructions);
    console.log("WORKED 2");
    // Setting the variables for the transaction
    transaction.feePayer = pubKey;
    let blockhashObj = await connection.getLatestBlockhash();
    transaction.recentBlockhash = blockhashObj.blockhash;

    const signature = await phantomProvider.signAndSendTransaction(
      connection,
      transaction,
      [pubKey]
    );
    await connection.confirmTransaction(signature);
    console.log(signature);
  }

  return (
    <div className="App">
      <header className="App-header">
        <h2>Tutorial: Connect to Phantom Wallet</h2>

        {provider && walletKey && <p>Connected account {walletKey}</p>}
        {provider && walletKey && <button onClick={transferSOL}>TEST</button>}

        {!provider && (
          <p>
            No provider found. Install{" "}
            <a href="https://phantom.app/">Phantom Browser extension</a>
          </p>
        )}
      </header>
    </div>
  );
}

export default App;

This is the error generated in and I don't know how to fix it. Can anyone help? Error in browser console

Also when I run npm start this error in vcode console also gets shown.

All I want to do is simply send SOL from one phantom wallet to another like sending money in real life, I have spent alot of time trying to figure this out someone please point out the problem and help

Answer 1

Use @solana/web3.js version 1.30.2 New versions form web3 libraries need some dependencies and webpack configurations.

You can use a code I'm sharing:-

Refer my code on this link

Answer 2

With Webpack 5 you need to polyfill Buffer.

Here is a tutorial on how to do so https://viglucci.io/how-to-polyfill-buffer-with-webpack-5

And here is an example of a webpack config of a Solana dApp UI made with CRA https://github.com/Bonfida/serverless-merch/blob/master/ui/config-overrides.js