Uncaught (in promise): TypeError: Cannot read property of undefined

æpp Development SDKs
1

Good day All,

Nikita referred me to this forum in regards to an issue I am experiencing with Angular.

To the point:

I have a boiler plate project with just one Home component.
The only thing I am trying to achieve is to create client from the aepp-sdk in

await ngOnInit() {
  await this.createClient();
}

  async createClient() {
    this.client = await Wallet({
      url: this.url,
      internalUrl: this.internalUrl,
      compilerUrl: this.compilerUrl,
      accounts: [MemoryAccount({ keypair: { secretKey: this.priv, publicKey: this.pub } })],
      address: this.pub,
      onTx: this.confirmDialog,
      onChain: this.confirmDialog,
      onAccount: this.confirmDialog,
      onContract: this.confirmDialog
    })
  }

However I am getting: Uncaught (in promise): TypeError: Cannot read property ‘publicKey’ of undefined

The error shouts when trying to assign MemmoryAccount to accounts property in the passed object, however i dont believe the problem is with sdk as, the same approach is used in Vue/React boilerplates and it works like a charm.

Can any angular expert give some advice ?

**Steps to reproduce:
download https://github.com/HristiyanG/identity-provider
from the rootFolder run forgae node
then run your local app from rootFolder/Identity-provider

Thanks in advance!

Enjoy!

2

The root cause of this problem is that Angular seems to be not providing polyfills by default for some types, where React and Vue do.

So what solves the problem is:
Installing these 2 packages to the Angular project:

npm install buffer --save
npm install process --save

And adding the following to the polyfill.ts:

// process is not defined
import * as process from 'process';
window['process'] = process;

// buffer is not defined
window.Buffer = window.Buffer || require('buffer').Buffer;

I’ll try to ask around for a more elegant way to solve this issue for good :face_with_raised_eyebrow:

A quick pointer to the JS SDK team: What made debugging take time here was the fact the corresponding error was silenced in node_modules/@aeternity/aepp-sdk/es/account/memory.js with the elegant comment:

... } catch (e) {
      // Instead of throw error and crash show warning that you do not set `KEYPAIR`
      // and can not sign transaction
      console.log('Please provide KEY_PAIR for sign transaction') }

:smiley: :smiley:

please don’t silence errors without prior evaluation guys, sometimes they arise for different reasons than missing params :smile: (cc: @shekhar-shubhendu @noandrea)

3 Likes
3

Can you show me how do you import sdk into your app?
If you are using bundle import { Universal } from '@aeternity/aepp-sdk' then it must work
If you are using tree-shaking import { Universal } from '@aeternity/aepp-sdk/es' the you need to handle polyfills on your side.

1 Like
4

Thanks Nikita!

This was exactly what I needed!
It solved my case.

Cheers and best regards!

3 Likes
5

@hristiyanAE.chain imports these things:

import Wallet from '@aeternity/aepp-sdk/es/ae/wallet';
import MemoryAccount from '@aeternity/aepp-sdk/es/account/memory'

What implications do your remarks have on the doc from the JS SDK @nduchak.chain, is this the same full bundle ? ->

 // Import Flavor
import Ae from '@aeternity/aepp-sdk/es/ae/universal' // or other flavor

In my project, I import

import { Universal } from '@aeternity/aepp-sdk/es/ae/universal'

, guess that’s the tree-shook ? Is es the indicator for tree shake ?