Object.seal on Mixins in non-production builds breaks IE11 + Google Captcha

[blimmer]

I am currently upgrading our production app to Ember 3.4 LTS. In doing my final testing, I realized that Google Invisible Recaptcha V2 was breaking in IE11 when testing in my staging environment.

The error I was seeing seemed like an issue with the recaptcha javascript, which caused me to file this issue on the Google Recaptcha side.

TypeError: Cannot define property '$jscomp_hidden_0.8984612007357275': object is not extensible
   at f (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.c_OM3jNnXiY.O/m=client/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcCOROd4CcLR3wzaYxHSU787pKavrYQ/cb=gapi.loaded_0:8:63)
   at n.prototype.set (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.c_OM3jNnXiY.O/m=client/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcCOROd4CcLR3wzaYxHSU787pKavrYQ/cb=gapi.loaded_0:9:171)
   at g (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.c_OM3jNnXiY.O/m=client/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcCOROd4CcLR3wzaYxHSU787pKavrYQ/cb=gapi.loaded_0:13:250)
   at f.prototype.set (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.c_OM3jNnXiY.O/m=client/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcCOROd4CcLR3wzaYxHSU787pKavrYQ/cb=gapi.loaded_0:11:148)
   at c.prototype.add (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.c_OM3jNnXiY.O/m=client/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcC

However, in further debugging the issue, it actually looked like an issue when trying to mixin the transform:date during the serialization of my Customer object.

In digging through the source code of Ember 3.4.6, I found this block of code that, interestingly calls out IE11 as problematic.

https://github.com/emberjs/ember.js/blob/v3.4.6/packages/ember-metal/lib/mixin.ts#L537-L548

I also found this PR where @rwjblue added an explicit exception for NAME_KEY.

Unfortunately, this $jscomp_hidden_* variable is pretty random so we can't add an explicit exception for that.

So, a few thoughts:

1. In my staging (pre-production) account, can I force DEBUG to be false? That's more of the behavior I want.
2. Does this issue make us consider a change in Object.seal in debug builds because we have to support IE11?

[blimmer]

To the question regarding the staging account, @locks helped me find this article: http://blog.firstiwaslike.com/staging-environments-with-ember-cli-deploy/

It looks like the recommendation for staging (pre-production) accounts is to use a production build environment for ember, and inject the other data via ENV variables.

[rwjblue]

You can work around the issue by mucking with freeze and seal. You basically redefine seal and freeze to add the object to a weakmap first then call the original seal / freeze.

[rwjblue]

Hmm, upon re-reading this issue though, I’m not sure why you think this is an Ember bug (as opposed to a bug in recapcha)?

[blimmer]

This issue only occurs when I'm running a DEBUG build of Ember. When I'm running in production, this works without problem.

It's possible that it's a recaptcha bug, so I kept google/recaptcha#285 open, but since it works with the prod build of Ember, I opened this issue.

With regards to mucking with freeze and seal, note that the item it tries to add is random, so it's not like NAME_KEY that we can hardcode.

[rwjblue]

Can you give us steps to reproduce?

[blimmer]

I spent some time last week trying to create a new app that reproduces this issue and am having trouble finding the exact combination of addons that cause the problem. I'm able to reproduce 100% of the time on the app I'm working on, but it's going to take some more time for me to find the secret sauce.

[viccatoff]

I have similar problem with Google Map SDK, new versions of EmberJS and IE11. Starting from Ember 3.2.0 I'm getting an error Cannot define property '$jscomp_hidden_0.7133729730000822': object is not extensible.

Steps to reproduce for me is easy:

1. Show google map on a page
2. Add a controller with action like this (basically it's an example from ember docs )

import EmberObject from '@ember/object';

const Person = EmberObject.extend({
  say(thing) {
    let name = this.get('name');
    alert('${name} says: ${thing}');
  }
});

export default Ember.Controller.extend({
  actions: {
    testIe() {
      let p1 = Person.create({
        name: 'Yehuda Katz'
      });

      p1.say('Yes');
    }
  }
});

3. Call this action.

It works in any other browser. It works if I remove Google Map from page. It works if I don't call this controller action. It works in Ember 3.1.3.

[sandstrom]

I'm doing some issue gardening 🌱🌿 🌷 and came upon this issue. Since it's quite old I just wanted to ask if this is still relevant? Since IE11 support will be dropped soon anyway, maybe we can close this?

By closing some old issues we reduce the list of open issues to a more manageable set.