keccak.js Uncaught ReferenceError: 缓冲区未定义答案

【问题标题】：keccak.js Uncaught ReferenceError: Buffer is not definedkeccak.js Uncaught ReferenceError: 缓冲区未定义
【发布时间】：2022-01-28 11:01:13
【问题描述】：

我在 ReactJS 中有一个小脚本：

import './App.css';
import { useState, useEffect } from 'react';
//Import de la librairie ethers (comme web3.js)
import { ethers } from 'ethers';
const { MerkleTree } = require('merkletreejs')
const keccak256 = require('keccak256');
const tokens = require('./tokens.json')

function App() {

  function isWhitelisted() {
    let tab = [];
    tokens.map(token => {
      tab.push(token.address);
    })
    const leaves = tab.map(v => keccak256(v));
    console.log(leaves);
    const tree = new MerkleTree(leaves, keccak256, { sort: true });
    const leaf = keccak256("0x7D8a1f6A5efc16E88FeF87E7745EAc2F5Cbc88D7")
    const proof = tree.getHexProof(leaf);
  }

  return (
    <div className="App">
      <button onClick={isWhitelisted}>TEST</button>
    </div>
  );
}

export default App;

很遗憾，我在执行脚本时遇到了这个错误：

keccak.js:41 Uncaught ReferenceError: Buffer is not defined
    at Keccak.update (keccak.js:41)
    at keccak256 (keccak256.js:11)
    at App.js:16
    at Array.map (<anonymous>)
    at isWhitelisted (App.js:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)

所以错误就在那里：

const leaves = tab.map(v => keccak256(v));

但是很遗憾我找不到解决方案，你们能帮帮我吗？谢谢！

【问题讨论】：

标签： reactjs ethereum ethers.js merkle-tree keccak

【解决方案1】：

好的，所以我在更改依赖项时发现了错误

"react-scripts": "5.0.0",

到

"react-scripts": "4.0.3",

它有效，我真的不明白为什么......如果有人知道......

【讨论】：

所以我有我的答案，Webpack v5.0 不支持 Buffer，但是 Webpack v4.0，是的。