Ember.js: 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 https://github.com/google/recaptcha/issues/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 Ember from 'ember';
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');
}

}
});
```

1. 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.