Buffer is not defined

[letchepare]

Describe the bug
Error when trying to use StellarSdk.KeyPair.fromSecret() using angular

What version are you on?
Check yarn.lock or package-lock.json to find out precisely what version of the SDK you're running.
Using angular 8.2.14
and
"stellar-sdk": "^3.3.0"

To Reproduce
Steps to reproduce the behavior:

1. create an angular project
2. import StellarSdk:
   import * as StellarSdk from 'stellar-sdk';
3. Use KeyPair.fromSecre()
   this.keyPair = StellarSdk.Keypair.fromSecret(this.secretKey);

Where this.secreKey is a "SBTxxxxx" address

4. See error

ERROR ReferenceError: Buffer is not defined
at calculateChecksum (strkey.js:252)
at decodeCheck (strkey.js:220)
at Function.decodeEd25519SecretSeed (strkey.js:112)
at Function.fromSecret (keypair.js:214)
at AppComponent.ngOnInit (app.component.ts:29)
at checkAndUpdateDirectiveInline (core.js:31910)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)

Expected behavior
I was expecting to have a KeyPair object

the OS i'm using is kunbuntu, idk if this is relevant

Thanks in advance for looking up into this bug or explaining to me how I could solve it, didn't find after an hour on internet :/

[abuiles]

@letchepare can you post this to https://stellar.stackexchange.com/? I think this is a problem with your built system, it should transpile Buffer to the Browser version.

[OsgoodSchlatter]

Hi Letchepare, I'm having a similar issue while building a stellar wallet. Have you found how to fix it ? thanks in advance

[brianebert]

Hi OsgoodSchlatter,

Sorry about your pain. I had some with the Buffer reference too. It's defined in some environments/tools, like node and browserify, but not in others, like the webpack5-ed browser code I'm working on with stellar-base. My quick and dirty fix is to define window.Buffer = require('buffer/').Buffer in my application's entry point. A webpack plugin attempt could be in order, but that could be way to elegant for me. I might take another route to getting rid of the Buffer reference. I just ran into this yesterday so too early to say. I hope this helps.

BE

[FosterSOAsare]

Can you please explain more @brianebert ?
I am also stuck at this please . I hope I receive an answer soon

[brianebert]

I hope this is soon enough, and please don't take my comments as expertise. If I remember correctly, a Stellar javascript library (stellar sdk or stellar base) calls or called on a global Buffer reference, which is available in node but not in the browser. I'm still resolving this by detecting the environment, and then executing: window.Buffer = require('buffer/').Buffer for code running in a browser. My code has the comment "// This is so Stellar stuff works in the browser"

The buffer module is available at https://www.npmjs.com/package/buffer

[Ifropc]

A follow-up on this. Webpack 4 used to include polyfills, so if you set webpack to version 4, it will work just fine.
Since version 5, it no longer polyfills Node.js so you need to update your webpack config. See documentation
TLDR:
Add

module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer')
    },
  },
};

To your webpack.config.js
As mentioned above, buffer library is available on npm.

[Shaptic]

We are working to get modernizing the SDK as a priority (see #792) so that webpack5 can be used easily!