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?
Install the browser buffer package:
npm install --save buffer
Import it and use it directly, example:
import {Buffer} from 'buffer';
Buffer.from('anything','base64');
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: '190031527bucket01',
dirName: 'photos', /* optional */
region: 'us-east-1',
accessKeyId: 'AKIAQEFWNSIYUN6CMDG4',
secretAccessKey: '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',
}
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"