Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'byteLength')

[Jesse]

I’m getting this error when trying to send a Blob chunk to my motoko backend canister. Below, I’ve attached a screenshot of the console error that I’m getting. below that, is a screenshot of the cause of the error that I’m getting. the cbor.bytes() function takes in an arrayBuffer and returns the byteLength. but in this case, the value variable is the buffer. so taking value.buffer results in undefined being passed into the cbor.bytes() function. I suspect that the problem with the cbor.bytes() function could possibly be a bug? I’m thinking maybe there should be a check on the value argument to see if it is an object that has an arrayBuffer as a property vs. if it is an arrayBuffer itself. I can’t say for sure because I don’t have access to serializer.js file to investigate further. would someone at dfinity be able to look into this? @Gabriel, @peterparker, @kpeacock.

at the very bottom, I’ve attached a screenshot of my code where I attempt to send the Blob chunks to the motoko backend. I made this code from several examples that were provided by devs within this forum and I’m not seeing any obvious reason why my code isn’t working (bear in mind, the examples were all in typescript and my code is in Javascript, so its possible that My code is a bit off, but if thats the case, Its going over my head.)

console error that I’m getting:

cause of the error(I think):

the cbor.bytes method:

my handleSubmit() function

I’ve tried putting an await on line 37. no luck.

[kpeacock]

That error seems about right - there is no .buffer available on an ArrayBuffer. It already is the buffer.

You’d expect to see the .buffer attribute on something like a UInt8Array

[Jesse]

I agree It makes sense why the error message is present. I think the presence of said error appears to be the reason why I’m unable to send Blobs to my motoko backend from my js front end. Shouldn’t the cbor.bytes Function be able to handle arguments that are buffers themselves, as well as arguments that are objects with a buffer property?

[peterparker]

Can you share your repo, sample repo or code (not screenshots) to reproduce the error?

[Jesse]

Yeah. I’ll get a sample repo up and running and share it with you within the next 2 days. Thank you!

[Jesse]

I have a repo that replicates the portion of my code that I’m having trouble with. upon pulling the repo, you’ll have to start a local version of the Internet-Identity canister.

GitHub - JessAYrn/SampleCode

in order to get the project running locally, you’ll have to:
1.) set the II_URL within the webpack.config.js file to include the canisterID of your local replica of the Internet-Identity canister.

2.) delete the following files:

dist/

.dfx/

node_modules/

src/declarations

package-lock.json

in the terminal, cd into the project and then run the following commands in the terminal:

npm i

dfx start

dfx deploy

npm start

please let me know if you have any questions.

[peterparker]

Awesome! I’ll give it a try within next days and comeback to you. Hope I’ll find something

[Jesse]

Thanks a lot. I definitely Appreciate it!

[peterparker]

I had to trick a bit the login process of your sample to access the upload feature, therefore not 100% sure but, it seems it worked out without modifying much code.

Only things I modified are those I suggested respectively handling the promises of the upload.
I sent you a PR about it.

Otherwise, regarding the original error of this post, the cbor error, I have to say, I did not faced it.
Therefore, my guess is that it has something to do with local setup and dependencies.

Here are those I used for the test:

Dfx 0.8.4
NodeJS v16.5.0
npm v7.19.1

For the @dfinity/… libraries, it fetched those specified in your package.json.
I am noticing you are using a mix of version 0.9.3 and 0.10.1, maybe it is worth pinning these to all the same version.

[Jesse]

Changing all of the @dfinity/… libraries to version 0.10.1 fixed the issue! I definitely appreciate you going through the trouble. Can’t thank you enough

[peterparker]

Sweet! Happy to hear it worked out. Have fun