Js-sdk question: .browser version and "Cannot read property 'resolve' of undefined"

Hello!

I’m trying to use aepp-sdk-js inside the browser. After many approaches to achieve this, the further I’ve reach was including aepp-sdk.browser.js directly in my html. However, this didn’t work as I’m getting this error:

Uncaught TypeError: Cannot read property ‘resolve’ of undefined
at l (client.js:56)

This is raised when rpc/client.js executes:
parent.postMessage({ jsonrpc: ‘2.0’, id: sequence, method, params, session: this.session }, ‘*’)

but the message handler routine receives an event without data:

function receive ({ data }) {
  if (typeof data !== 'object' || data.type === 'webpackOk') {
    return
  }
  const { result: { resolve, reject }, id } = data

and with data being undefined, the error raises.

I need help with this:

I tried and got that error with versions 2.0.0, 2.3.0, and some earlier than those. what should it do?
The error happens in firefox as in chrome, loading the code from file and also served by a webserver.

Finally what I want to achieve is build a simple aepp with a contract in an state channel:

  • Which sdk version should I be using?
  • Which node version is recommended?

Thanks!!

PS: I’ve got the same problem when using versions: 3.3.0 and 3.2.0, however using 3.1.0, this new problem happens:

Uncaught TypeError: Cannot read property ‘ModeOfOperation’ of undefined

in es/utils/crypto.js:
const Ecb = aesjs.ModeOfOperation.ecb

I’ve switched to source version of the library and making the bundle with them. I’ve got the same problem when crypto.js try to use aes-js. I’ve “solved” it, by commenting “externals” section in webpack.config.js. But, after doing that, a new problem shows up:

“Uncaught (in promise) Error: rpc client: Can’t send messages to itself”

Triggered at rpc/client.js: RpcClient async init function.

1 Like

Hello @dave,
Nice to meet you. You can find example of AEPP usage in sdk repo(https://github.com/aeternity/aepp-sdk-js/tree/develop/examples/connect-two-ae). The main thing is that you are using Aepp only in pair with your Wallet, that’s why you see this error Uncaught TypeError: Cannot read property ‘resolve’ of undefined at l (client.js:56). If you are using the lates sdk(3.0.0) you will see more informative error like rpc client: Can't send messages to itself, so please use the latest version of sdk

2 Likes

Hi nduchak! Thanks for your answer and time!

I’ve actually tested with versions >= 3.0.0 and added the error you mention and the end of my message above.

When trying to run connect-two-ae/identity I’ve get these errors:

aweil@pc18:~/repos2/aetest/identity$ echo $AE_SDK_MODULES
/home/aweil/repos2/aetest/node_modules/@Albert/aepp-sdk/es/

aweil@pc18:~/repos2/aetest/identity$ ls $AE_SDK_MODULES
account accounts.js ae chain channel contract index.js node.js oracle rpc tx utils

aweil@pc18:~/repos2/aetest/identity$ yarn install
yarn install v1.15.2
[1/4] Resolving packages…
success Already up-to-date.
Done in 0.49s.

aweil@pc18:~/repos2/aetest/identity$ yarn run start:dev
yarn run v1.15.2
NODE_ENV='dev' webpack-dev-server --config ./webpack.config.js clean-webpack-plugin: /home/aweil/repos2/aetest/identity/dist has been removed. ℹ 「wds」: Project is running at http://localhost:9000/ ℹ 「wds」: webpack output is served from / ℹ 「wds」: Content not from webpack is served from /home/aweil/repos2/aetest/identity/dist ✖ 「wdm」: Hash: ec4e7971ffa15b503afa Version: webpack 4.16.5 Time: 5147ms Built at: 05/20/2019 2:58:57 PM Asset Size Chunks Chunk Names bundle.js?ec4e7971ffa15b503afa 1.7 MiB wallet [emitted] wallet style.css?ec4e7971ffa15b503afa 2.54 KiB wallet [emitted] wallet index.html 651 bytes [emitted] Entrypoint wallet = bundle.js?ec4e7971ffa15b503afa style.css?ec4e7971ffa15b503afa [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {wallet} [built] [./node_modules/strip-ansi/index.js] 161 bytes {wallet} [built] [./node_modules/url/url.js] 22.8 KiB {wallet} [built] [./node_modules/vue-router/dist/vue-router.esm.js] 64.1 KiB {wallet} [built] [./node_modules/vue/dist/vue.runtime.esm.js] 207 KiB {wallet} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 7.78 KiB {wallet} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {wallet} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {wallet} [built] [./node_modules/webpack/hot sync ^\.\/log] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {wallet} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {wallet} [built]
[./src/App.vue] 1.02 KiB {wallet} [built]
[./src/index.js] 405 bytes {wallet} [built]
[./src/router.js] 325 bytes {wallet} [built]
[./src/store.js] 250 bytes {wallet} [built]
[0] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js 40 bytes {wallet} [built]
+ 34 hidden modules

ERROR in ./src/components/Home.vue?vue&type=script&lang=js (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js)
Module not found: Error: Can’t resolve ‘AE_SDK_MODULES/account/memory’ in ‘/home/aweil/repos2/aetest/identity/src/components’
@ ./src/components/Home.vue?vue&type=script&lang=js (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js) 44:0-57 78:17-30
@ ./src/components/Home.vue?vue&type=script&lang=js
@ ./src/components/Home.vue
@ ./src/router.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

ERROR in ./src/components/Home.vue?vue&type=script&lang=js (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js)
Module not found: Error: Can’t resolve ‘AE_SDK_MODULES/ae/wallet’ in ‘/home/aweil/repos2/aetest/identity/src/components’
@ ./src/components/Home.vue?vue&type=script&lang=js (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js) 43:0-45 74:4-10
@ ./src/components/Home.vue?vue&type=script&lang=js
@ ./src/components/Home.vue
@ ./src/router.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!src/main.css:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js?!./src/main.css] ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref–1-2!./src/main.css 211 KiB {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/vue-loader/lib/index.js??vue-loader-options!src/components/Home.vue?vue&type=style&index=0&id=8dc7cce2&scoped=true&lang=css:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Home.vue?vue&type=style&index=0&id=8dc7cce2&scoped=true&lang=css] ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=style&index=0&id=8dc7cce2&scoped=true&lang=css 162 bytes {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child html-webpack-plugin for “index.html”:
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 797 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

:information_source: 「wdm」: Failed to compile.

PS: i’m using nvm and node version 10.15.3.

2 Likes

What causes that error?

Thanks

1 Like

Hey @dave, It’s cause by using AEPP not inside the Wallet. You can use AEPP only in pair with Wallet(inside the Wallet iframe).

Thanks @nduchak.chain. I’m working on a basic game for state-channels and I’d like to make a web version. This triggers me a few questions:

Will it be always a requirement to have a Wallet to use the sdk ?

Which is the wallet required ?

thanks!
david