未捕获的引用错误：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

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

找到这个示例 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>

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

Answer 4

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

首先：

npm install --save buffer

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

import { Buffer } from "buffer";

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

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

Answer 6

安装浏览器缓冲包：

npm install --save buffer

然后在你的组件中使用它

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

这对我有用（Vite-Project）