Amplify-js: Uncaught TypeError: "Object.entries" is not a function

[pachu4u]

Describe the bug
I am getting this error on console.

Uncaught TypeError: "Object.entries" is not a function - IONIC app

Strangely though it works fine on browser and most of the android devices. This is was found on Le1s (Le TV) phone.

Output of ionic info

Ionic:

ionic (Ionic CLI) : 4.2.1 ()
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.3

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 6.4.0, browser 5.0.4
Cordova Plugins : no whitelisted plugins (16 plugins total)

System:

NodeJS : v10.10.0 ()
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61

"aws-amplify": "^1.1.22",
"aws-amplify-angular": "^2.1.9",
"cordova-android": "6.4.0",

To Reproduce
Steps to reproduce the behavior:
Might be a tricky one to re-produce. Hence tried to debug and found the exact line where it was throwing the error.

Expected behavior
It should not throw type error on any device and should work as expected

When I debug, i found that the issue was in this function.
Screenshots
/**
* Configure XR part with configurations
*
* @param {XROptions} config - Configuration for XR
* @return {Object} - The current configuration
*/
XR.prototype.configure = function (options) {
var _this = this;
var opt = options ? options.XR || options : {};
logger.debug('configure XR', { opt: opt });
this._options = Object.assign({}, this._options, opt);
Object.entries(this._pluggables).map(function (_a) {
var name = _a[0], provider = _a[1];
if (name === _this._defaultProvider && !opt[_this._defaultProvider]) {
provider.configure(_this._options);
}
else {
provider.configure(_this._options[name]);
}
});
return this._options;
};

• Device: Le1s
• OS: Android 6

Only using Auth & API in my application

[manueliglesias]

Hi @pachu4u

Have you tried adding this to your tsconfig.json?

{
  // ...
  "lib": [ "es2017.object" ]
}

[pachu4u]

@manueliglesias - I have this "es2015". Will give a try with your suggestion and get back

[pachu4u]

@manueliglesias - It has not helped. Still getting the same issue

[manueliglesias]

@pachu4u Ok, so I just learned that typescript doesn't polyfill lib entries.

Can you try adding this polyfill ?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill

if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };
}

[pachu4u]

@manueliglesias - Here is my tsconfig.json

`{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015",
"es2017.object"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"types": ["node"]

},
"include": [
"src//.ts"
],
"exclude": [
"node_modules",
"src//.spec.ts",
"src/*/__tests__/.ts",
"typings",
"typings/main",
"typings/main.d.ts",
"typings/index.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
`

[pachu4u]

@manueliglesias - Thanks a ton. That did the trick. Is there an ideal place to put that script.

I have added it in index.html just before the vendor.js include.

like so.

[manueliglesias]

I am glad it worked! 😄

Is there an ideal place to put that script.

According to ionic docs, looks like you should have a polyfills.ts file in your project, that would be the place.

[KillerPrints]

@pachu4u Ok, so I just learned that typescript doesn't polyfill lib entries.

Can you try adding this polyfill ?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill

if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };
}

I'm having the same issue and I tried adding this to my polyfills.ts but it didn't help. Any idea what else I could try?

Edit - I also wanted to mention that my code is working on Chrome, I'm only getting this error in Edge and IE.