Good day. I have app created via create-react-app and I am trying to create decoder for covid greenpass. I have an issue with base45 decoding. It causes error like this:
base45-js.js:60 Uncaught ReferenceError: Buffer is not defined
at Object.decode (base45-js.js:60:1)
at CovidPass (CovidPass.js:10:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
Here's code. Any ideas how to fix this?
import React from 'react';
import cbor from 'cbor-web';
import base45 from 'base45';
import pako from 'pako';
const CovidPass = () => {
const decodedBase45 = base45.decode('I2B-KEP2');
console.log(decodedBase45);
return (
<p>{decodedBase45}</p>
);
}
export default CovidPass;
This is from an old answer here:
Install the browser buffer package:
npm install --save buffer
Import it and use it directly, example:
import {Buffer} from 'buffer';
Buffer.from('anything','base64');
ref:
Uncaught ReferenceError: Buffer is not defined in React
I solved this by downgrading "react-scripts": "5.0.0" to "react-scripts": "4.0.3" in package.json, and running npm install. But I think there's much better solution.