CODEWITHSUNDEEP
node.jsreactjsbuffer
Gyarmati István
Gyarmati István

Reputation: 553

Uncaught ReferenceError: Buffer is not defined in React

If I add the following lines into my code it throws the following error:

import { BIP32Interface } from "bip32";

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

Error:

Uncaught ReferenceError: Buffer is not defined

I'm using the same package in a Next.js app, so I think the problem here, that I haven't got node.js environment when compiling happens...

How could I pass this issue?

I tried: yarn add buffer ->

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

Any ideas?

Upvotes: 35

Views: 84716

Answers (7)

Ginyao
Ginyao

Reputation: 11

i am using vite + react and can work below

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
export default defineConfig({
    // ...other config settings
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }

})

in vite.config.ts, check here Buffer is not defined in React-vite

Upvotes: 1

Rohan
Rohan

Reputation: 1

Install the browser buffer package:

npm install --save buffer

Then use this in your component

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

This worked for me(Vite-Project)

Upvotes: 0

krishna vamsi
krishna vamsi

Reputation: 91

I got this buffer error when I tried to upload object (doc/pdf/image) etc from react to AWS S3 Bucket. Then after referring multiple website i got the solution below.

Find this sample react code to understand.

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 || require("buffer").Buffer; Add this statement after all the import statements to get rid of "buffer is not defined"

Upvotes: 9

Bruno Gomes
Bruno Gomes

Reputation: 21

for me what worked was:

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'] })],
        },
    },
})

reply to this comment:

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

Upvotes: 2

malibil
malibil

Reputation: 179

I was getting the same error and this is how I solved the problem. But I have no clue as to why.

firs:

npm install --save buffer

(I don't know what it does, but it worked.) and then;

import { Buffer } from "buffer";

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

Upvotes: 6

Abhijit Panchal
Abhijit Panchal

Reputation: 169

First do this:

npm install --save buffer

Then add

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

after my import statements. It worked for me.

Upvotes: 16

rubench0
rubench0

Reputation: 849

Install the browser buffer package:

npm install --save buffer

Import it and use it directly, example:

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

Upvotes: 56

Related Questions