Klaytn study - caver.js buffer is not defined 에러 해결

728x90

caver.js 를 이용해 write하는 예제를 하던 중 또 에러가 발생하였다.

Caver를 이용해 private 키를 통해 지갑을 받아오는 부분에서 문제가 생겼다.

const deployer = caver.wallet.keyring.createFromPrivateKey(privatekey);

컴파일은 잘 되었으나 브라우저에서 buffer is not defined 에러가 발생하였다.

검색해보니 이 또한 Webpack5와 호환 문제라고 한다.

참조 링크를 참조하여 아래 내용을 추가해주었다.

var global = global || window;

global.Buffer = global.Buffer || require("buffer").Buffer;

참조 : https://stackoverflow.com/questions/50371593/angular-6-uncaught-referenceerror-buffer-is-not-defined

import logo from "./logo.svg";
import { Buffer } from "buffer";
import Caver from "caver-js";
import "./App.css";

var global = global || window;
global.Buffer = global.Buffer || require("buffer").Buffer;

const COUNT_CONTRACT_ADDRESS = "0x13FE7f024164B388183175018B8Ed7bfeb7af2c2";
const ACCESS_KEY_ID = "";
const SECRET_ACCESS_KEY = "";
const CHAIN_ID = "1001"; // MAINNET 8217 TESTNET 1001
const COUNT_ABI =
  '[ { "constant": true, "inputs": [], "name": "count", "outputs": [ { "name": "", "type": "uint256" } ], "payable": false, "stateMutability": "view", "type": "function" }, { "constant": true, "inputs": [], "name": "getBlockNumber", "outputs": [ { "name": "", "type": "uint256" } ], "payable": false, "stateMutability": "view", "type": "function" }, { "constant": false, "inputs": [ { "name": "_count", "type": "uint256" } ], "name": "setCount", "outputs": [], "payable": false, "stateMutability": "nonpayable", "type": "function" } ]';

const option = {
  headers: [
    {
      name: "Authorization",
      value:
        "Basic " +
        Buffer.from(ACCESS_KEY_ID + ":" + SECRET_ACCESS_KEY).toString("base64"),
    },
    { name: "x-chain-id", value: CHAIN_ID },
  ],
};

const caver = new Caver(
  new Caver.providers.HttpProvider(
    "https://node-api.klaytnapi.com/v1/klaytn",
    option
  )
);
const CountContract = new caver.contract(
  JSON.parse(COUNT_ABI),
  COUNT_CONTRACT_ADDRESS
);
const readCount = async () => {
  const _count = await CountContract.methods.count().call();
  console.log(_count);
};

const getBalance = (address) => {
  return caver.rpc.klay.getBalance(address).then((response) => {
    const balance = caver.utils.convertFromPeb(
      caver.utils.hexToNumberString(response)
    );
    console.log("BALANCE: " + balance);
    return balance;
  });
};

const setCount = async (newCount) => {
  // 사용할 account 설정
  try {
    const privatekey =
      "";

    const deployer = caver.wallet.keyring.createFromPrivateKey(privatekey);
    caver.wallet.add(deployer);
    // 스마트 컨트랙트 실행 트랜젝션 날리기
    // 결과 확인

    const receipt = await CountContract.methods.setCount(newCount).send({
      from: deployer.address, // address
      gas: "0x4bfd200", //
    });
    console.log(receipt);
  } catch (e) {
    console.log("[ERROR_SET_COUNT] " + e);
  }
};

// 1 Smart contract 배포 주소 파악(가져오기)
// 2 caver.js 이용해서 스마트 컨트랙트 연동하기
// 3 가져온 스마트 컨트렉트 실행 결과(데이터) 웹에 표현하기

function App() {
  readCount();
  getBalance("0xfdb8c7ca38d425b35d84feb2aa5d026c15cf7141");
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button
          title={"카운트 변경"}
          onClick={() => {
            setCount(100);
          }}
        ></button>
        <p>
          GOOD <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

그리고 아래 참조링크를 참고하여

webpack.config.js 파일에

buffer 내용도 추가해주었다.