React中未捕获的引用错误：Buffer未定义

Question

如果我将以下代码添加到我的程序中，它会抛出以下错误：

import { BIP32Interface } from "bip32";

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

错误：

Uncaught ReferenceError: Buffer is not defined

我正在一个Next.js应用程序中使用相同的包，所以我认为问题在于编译时没有得到node.js环境...

我该如何解决这个问题？

我尝试了： yarn add buffer ->

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

任何想法？

- Gyarmati István

Answer 1

安装浏览器缓存包：

npm install --save buffer

导入它并直接使用，例如：

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

- rubench0

---

为什么需要使用 --save？ - Iván

不是了。以前可能会在package.json文件中保存软件包，但现在是自动的。 - Ethan Hermsey

Answer 2

首先做这个：

npm install --save buffer

然后添加

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

在我的导入语句之后。它对我有用。

- Abhijit Panchal

---

你介意解释一下为什么这个代码能够运行吗？ - Axel Köhler

这个方法的作用是解决一个问题，即除非由某个插件定义，否则window.Buffer将未定义，这将把buffer设置为你安装的缓冲库。 对于TypeScript，下面的代码对我有效：if (!window.Buffer) { window.Buffer = Buffer; } - Ohad Bitton

Answer 3

我试图将文档、PDF、图片等对象从React上传到AWS S3存储桶时，出现了缓冲区错误。通过参考多个网站，我得到了以下解决方案。

请查看此示例React代码以了解详情。

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").缓冲区;

- krishna vamsi

Answer 4

我遇到了同样的错误，以下是我解决问题的方法。但是我不知道为什么会出现这个错误。

首先：

npm install --save buffer

我不知道它是如何工作的，但它确实起到了作用。

然后；

import { Buffer } from "buffer";

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

- malibil

---

这对我在VUE 3 CLI项目上起作用。 - Exogenus

Answer 5

对我而言，有效的方法是：

import { defineConfig } from 'vite'
import reactfrom '@vitejs/plugin-react'
import path from 'path'
import inject from '@rollup/plugin-inject'

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        }
    },
    build: {
        rollupOptions: {
            plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
        },
    },
})

回复此评论：

https://github.com/vitejs/vite/discussions/2785#discussioncomment-1452855

- Bruno Gomes

Answer 6

安装浏览器缓冲包：

npm install --save buffer

然后在你的组件中使用这个。

 import { Buffer } from "buffer/"; 
 window.Buffer = Buffer;

这对我来说很有效（Vite-Project）。

- Rohan