Loading Aurelia breaks Google API

Question

I have created a reproduction of this bug here (ugly use of Aurelia but to prove the point): https://jberggren.github.io/GoogleAureliaBugReproduce/

If I load Google API and try to list my files in Google Drive my code derived from Googles quickstart works fine. If I use the same code after loading Aurelia I get a script error from gapi stating

Uncaught Error: arrayForEach was called with a non array value at Object._.Sa (cb=gapi.loaded_0:382) at Object._.eb (cb=gapi.loaded_0:402) at MF (cb=gapi.loaded_0:723) at Object.HF (cb=gapi.loaded_0:722) at Object.list (cb=gapi.loaded_0:40) at listFiles (index.js:86) ...

When debugging it seems to be some sort of array check (Chroms says 'native code') that failes after Aurelia is loaded. In my search for an answer I found two other people with the same problem but no solution (Aurelia gitter question, SO Question). Don't know if to report this to the Aurelia team, Google or where the actual problem lays.

Help me SO, you are my only hope.

Answer 1

This is not a perfect solution but works.

aurelia-binding

https://github.com/aurelia/binding/blob/master/src/array-observation.js

Aurelia overrides Array.prototype.* for some reasons.

gapi (especially spreadsheets)

Gapi lib checks to make sure that is it native code or not.

// example
const r = /\[native code\]/
r.test(Array.prototype.push)

conclusion

So, we have to monkey patching.

gapi.load('client:auth2', async () => {
  await gapi.client.init({
    clientId: CLIENT_ID,
    discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
    scope: 'https://www.googleapis.com/auth/spreadsheets',
  });
  // monkey patch
  const originTest = RegExp.prototype.test;
  RegExp.prototype.test = function test(v) {
    if (typeof v === 'function' && v.toString().includes('__array_observer__.addChangeRecord')) {
      return true;
    }
    return originTest.apply(this, arguments);
  };
});