Ember.js: Maximum call stack size exceeded when using Google Maps

[Mithrilhall]

Using Google Maps API v3 I'm getting the following error message when using Ember 3.6.0. It works fine in Ember 3.5.1.

Uncaught RangeError: Maximum call stack size exceeded
    at Array.CPGETTER_FUNCTION [as []] (metal.js:751)
    at Ib (imagery_viewer.js:28)
    at Jb (imagery_viewer.js:29)
    at Ib (imagery_viewer.js:28)
    at Jb (imagery_viewer.js:29)
    at Ib (imagery_viewer.js:28)
    at Jb (imagery_viewer.js:29)
    at Ib (imagery_viewer.js:28)
    at Jb (imagery_viewer.js:29)
    at Ib (imagery_viewer.js:28)

Here is a link to project showing the error. The _Master_ branch is 3.5.1 and there is a 3.6.0 branch where the error is shown.

[sandydoo]

I've seen a similar issue with ember-google-maps https://github.com/sandydoo/ember-google-maps/issues/43.

The error seems to be caused by the array prototype extensions added by Ember.

There is a chunk of obfuscated code in the Google Maps SDK that appears to compare nested arrays.
It uses a for in loop to compare each element in the array. In Ember 3.6, this loop now also returns [], which appears to be a circular reference to the same array. So Google Maps loops over these two arrays, compares each element, then tries fetching [], which returns the same array all over again. Infinite loop.

The relevant code with a few comments:

_.ac = function(a, b) {
        if (null == a || null == b)
            return null == a == (null == b);
        if (a.constructor != Array && a.constructor != Object)
            throw Error("Invalid object type passed into jsproto.areObjectsEqual()");
        if (a === b)
            return !0;
        if (a.constructor != b.constructor)
            return !1;
        for (var c in a) // <-- a = [0, 'm', 0]; c = '[]'
            if (!(c in b && $b(a[c], b[c]))) // <-- a[[]] = a
                return !1;
        for (var d in b)
            if (!(d in a))
                return !1;
        return !0
    }
    ;
   // Element comparison function that supports nested arrays
    $b = function(a, b) {
        if (a === b || !(!0 !== a && 1 !== a || !0 !== b && 1 !== b) || !(!1 !== a && 0 !== a || !1 !== b && 0 !== b))
            return !0;
        if (a instanceof Object && b instanceof Object) {
            if (!_.ac(a, b)) // <-- Recursive call to `ac`!
                return !1
        } else
            return !1;
        return !0
    }
    ;

Current workarounds:

1. Disable prototype extensions with EXTEND_PROTOTYPES: false
2. Downgrade to Ember 3.5

[sandydoo]

Looks like @rwjblue figured it out, just needs a release. https://github.com/emberjs/ember.js/commit/98afaff5f82bc5afa743bf8889ea10977d7f76f9

UPDATE: I've tested ember-google-maps with ember@master. https://github.com/emberjs/ember.js/commit/98afaff5f82bc5afa743bf8889ea10977d7f76f9 solves the issue as expected.

for (x in [1,2,3]) { console.log(x); }
// 0 
// 1
// 2 
// _super
👍 

// No more '[]'

[Mithrilhall]

I ended up putting this in my init to temporarily fix it (found in another issue):

// TODO: remove once https://github.com/emberjs/ember.js/issues/17190 has been fixed
const properties = ['[]', 'firstObject', 'lastObject', 'hasArrayObservers', '@each'];
properties.forEach(property => {
    const desc = Object.getOwnPropertyDescriptor([].__proto__, property);
    desc.enumerable = false;
    Object.defineProperty([].__proto__, property, desc);
});

[jacobq]

I'm pretty sure this is a duplicate of https://github.com/emberjs/ember.js/issues/17190 and is fixed in 3.7.0-beta.2

[sandydoo]

I'm pretty sure this is a duplicate of #17190 and is fixed in 3.7.0-beta.2

@jacobq, yes it's the same issue and it has been fixed. Thanks for catching it so early.

_However_, considering that prototype extensions are enabled by default and the ability this has to break third-party code, I believe it calls for a 3.6.1 patch. 98afaff does have the correct [BUGFIX release] tag, so we should ideally expect a patch.

[rwjblue]

yep, we will definitely have a 3.6.1 _soon_ (hopefully today/tomorrow)...