IE11 Object doesn't support property or method 'Symbol(Symbol.iterator)_a.2p3bca3ct9h

Question

I am using Angular 8, tslint 5.15 & typescript v3

I am reading file as ArryaBuffer using below code

const reader = new FileReader();
    reader.readAsArrayBuffer(<FileObject>);
    reader.onload = () => {
      this.uploadedData= new Uint8Array(reader.result as ArrayBuffer);
    }

Now when i pass this uploadedData into API, I am converting into byteArray using below fucntion.

convertLicenseToByteArray(uploadedData) {
    const bytesArray = [];
    for (const i of uploadedData) {
      bytesArray.push(i);
    }
    return bytesArray;
  }

The above code is giving error in ie11,

ERROR TypeError: Object doesn't support property or method 'Symbol(Symbol.iterator)_a.srxqdvyfxlx'

I tried to search on net and found that may be i need to add babel-polyfill but it's not working for me.

Any help?

console.log your `uploadedData` and see if `Symbol(Symbol.iterator)` is present in the `object prototype`. If not it's `not iterable` data structure — Petia Biloshytsky, Dec 31 '19 at 12:42

score 3 · Accepted Answer · answered Dec 31 '19 at 10:14

3

add 'core-js' into you package.json and add import into your polyfills.ts

import 'core-js/es6/symbol';

answered Dec 31 '19 at 10:14

Petia Biloshytsky

126
6

I tried what you suggest, But still got the same error! – Jayesh Dhandha Dec 31 '19 at 12:19
I followed https://github.com/babel/babel/issues/4075#issuecomment-321466247 Which looks similar to your answer, And i believe it should work. But no luck! – Jayesh Dhandha Dec 31 '19 at 13:31
Things started working on new year with this solution :) Happy New Year in true sense! – Jayesh Dhandha Jan 02 '20 at 07:11
So, how's your year been? – Brandon Lorenz Nov 12 '20 at 18:28

T.J. Crowder · Answer 2 · 2019-12-31T10:00:10.927

2

IE11 doesn't support virtually any of ES2015+, so that means no arrow functions, no Symbol, and no iterables and iterators. (IE9-IE11 do support const and let, but not properly. They support an early version that isn't what was standardized. The biggest discrepancy is in regard to for loops.)

If you want to run that code on IE11, you'll need to transpile it to ES5 and add some polyfills. Symbol and iterability can't be properly polyfilled, but Babel and others provide something partially functional. I see here that Babel now recommends not using their own @babel/polyfill and instead using core-js directly (and regenerator runtime if you need to transpile generator functions).

edited Dec 31 '19 at 10:00

answered Dec 31 '19 at 09:54

T.J. Crowder

1,031,962
187
1,923
1,875

Crowder, Your answer is also correct and the explanation is also good. But the accepted answer saved my time ;) – Jayesh Dhandha Jan 02 '20 at 11:42
1

It's my pleasure to talk with such a decent person (Author of "JavaScript The new Toys" book) – Jayesh Dhandha Jan 02 '20 at 11:51

score 0 · Answer 3 · answered Dec 31 '19 at 14:48

The issue is relates to the uploadedData parameter, when we call the convertLicenseToByteArray method and use the uploadedData variable, if the data is not populated or undefined, it will display this error.

You could try to call the convertLicenseToByteArray method in the reader onload function.

  const reader = new FileReader();    
  reader.onload = (_event) => { 
    this.uploadedData= new Uint8Array(reader.result as ArrayBuffer);   
    console.log(this.convertLicenseToByteArray(this.uploadedData).length);
  }

But in my case, it's not undefined – Jayesh Dhandha Jan 02 '20 at 05:15 — Jayesh Dhandha, Jan 02 '20 at 05:15

score 0 · Answer 4 · answered May 13 '20 at 12:41

For anyone that might be having this problem in an Aurelia project without typescript, I was able to solve it by installing core-js which included the polyfills needed to make this work.

npm install --save core-js@3.6.5

I then added the import in the .js file where I was having the issue and it started working.

import "core-js"

IE11 Object doesn't support property or method 'Symbol(Symbol.iterator)_a.2p3bca3ct9h

4 Answers4