未捕获的引用错误：React 中未定义缓冲区

Question

如果我将以下几行添加到代码中，则会引发以下错误：

import { BIP32Interface } from "bip32";

let node: BIP32Interface = bip32.fromBase58(key);

错误：

Uncaught ReferenceError: Buffer is not defined

我在 Next.js 应用程序中使用相同的包，所以我认为这里的问题是，编译时我没有 node.js 环境......

我怎样才能通过这个问题？

我尝试过：纱线添加缓冲区->

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

有任何想法吗？

Answer 1

安装浏览器缓冲包：

npm install --save buffer

导入后直接使用，例如：

import {Buffer} from 'buffer';
Buffer.from('anything','base64');

Answer 2

首先这样做：

npm install --save buffer

然后加

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

在我的导入声明之后。这对我有用。

Answer 3

当我尝试将对象（doc/pdf/image）等从 React 上传到 AWS S3 Bucket 时，出现此缓冲区错误。然后在参考多个网站后我得到了以下解决方案。

找到这个示例反应代码来理解。

import logo from './logo.svg';
import './App.css';
import S3FileUpload from 'react-s3';
window.Buffer = window.Buffer || require("buffer").Buffer;

function App() {
  const onFileChange = (file)=>{
    const config = {
      bucketName: 'bucket-name',
      dirName: 'photos', /* optional */
      region: 'us-east-1',
      accessKeyId: 'access-key-id',
      secretAccessKey: 'secret-access-key',
    }
    S3FileUpload.uploadFile(file, config)
    .then((data)=>{
      console.log(data.location);
    }).catch((err)=>{
      alert(err);
    })
  }

  return (
    <div className="App">
      <h1>Hello React</h1>
      <input type="file" onChange={(e)=>onFileChange(e.target.files[0])} />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

窗口.Buffer = 窗口.Buffer || 需要（“缓冲区”）。缓冲区；在所有导入语句之后添加此语句以消除“缓冲区未定义”

Answer 4

我遇到了同样的错误，这就是我解决问题的方法。但我不知道为什么。

首先：

npm install --save buffer

（我不知道它的作用，但它有效。）然后；

import { Buffer } from "buffer";

Buffer.from("anything", "base64");
window.Buffer = window.Buffer || require("buffer").Buffer;