Alpine: IE11 - Expected Identifier Error

[keyurshah]

I'm getting an error

Script1010: Expected Identifier
alpine-ie11.js (5918,9)

which points to the last line in the block

  /**
   * Copyright (C) 2017 salesforce.com, inc.
   */
  const { isArray: isArray$1 } = Array;

I tried adding in the head tag the following based on others receiving this error, but no luck:

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

Wondering if anyone else is receiving this error as well?

[heybourn]

Yup, just got this too!

[HugoDF]

That looks like a destructuring assignment that didn't get compiled away 👀

[HugoDF]

@heybourn @keyurshah or anyone else seeing this issue, could you take the code in the PR I've just opened for a spin?

It's available through JSDeliver at https://cdn.jsdelivr.net/gh/HugoDF/alpine@fix-compile-membrane/dist/alpine-ie11.js, thanks for reporting this.

Hopefully it fixes the issue and we can get it merged ASAP.

[heybourn]

Seems to have removed the initial issue, however I'm now getting an error on IE that looks like this:

Unhandled promise rejection TypeError: Proxy polyfill does not support trap 'originalTarget'

Probably unrelated, but any ideas as to what it could be caused by?

[HugoDF]

Sounds like it has something to do this the following: https://developer.mozilla.org/en-US/docs/Web/API/Event/originalTarget

Weird that it would be an IE11-only issue

Could you share some reproduction code? Not that I have IE11 handy to test 🙈

[keyurshah]

Thanks for helping out with this @HugoDF .

I'm getting the same error as @heybourn as well

Unhandled promise rejection TypeError: Proxy polyfill does not support trap 'originalTarget'

[HugoDF]

Is this just happening on Alpine.js load/start?

Could be the way membrane uses Proxy is not supported by the polyfill. In that case we might have to hunt for a new one.

[heybourn]

It happens as soon as I hit the site on IE. Not present in Chrome from what I can see.

[SimoTod]

Not sure if it could be of any help but, as far as I know, the proxy polyfill is quite basic and only supports get, set, apply and construct.
If you try to call another trap, the polyfill will trigger an exception: https://github.com/GoogleChrome/proxy-polyfill/blob/8ad3f2818067ff08456db414b9d17898ae01949a/src/proxy.js#L60

The weird thing is that 'originalTarget' is not an official trap (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler) so it might be the membrane trying to do something custom.

[SimoTod]

I believe it's due to the handler object using internal variables (https://github.com/salesforce/observable-membrane/blob/4aa7e417755796a99df6d0180d61cba10f7cb991/src/reactive-handler.ts#L58).

The proxy polyfill just assumes that any properties of the handler should be a trap and crashes.

We should try another polyfill or fork the actual one, remove the line triggering an error and let it fail silently for unsupported traps.

It might still not be working properly if it relies on other unsupported traps, though.

[HugoDF]

How bad would it be to drop IE11 support? Would probably be a deal breaker for a bunch of people.

It sounds like it's going to be hard to make the polyfill and membrane play nicely

[SimoTod]

Yeah, I couldn't really find another polyfill as good as the one we use. Also, Salesforce's membrane doesn't support IE11 so there are probably other things which won't work.
Sadly, I think a lot of devs still need it because required by their clients.

[HugoDF]

I guess we could revive the custom proxy for the IE11 build? Probably one for @calebporzio

[heybourn]

As @SimoTod has mentioned, this need for IE support is solely due to client work. I'd have no issues with Alpine otherwise!

[HugoDF]

Yep, I think the issue is with observable-membrane storing originalTarget as a property on the Proxy handler when created.

[harrysbaraini]

I had to rollback to 2.0.2 version, so IE11 is working again. Only glitch I found is that I need to add class="" where x-bind:class is used, otherwise the class is not updated:

<div class="" x-bind:class="isHidden ? 'hidden' : ''">
   ...
</div>

[DannyEndert]

I had to rollback to 2.0.2 version, so IE11 is working again. Only glitch I found is that I need to add class="" where x-bind:class is used, otherwise the class is not updated:

<div class="" x-bind:class="isHidden ? 'hidden' : ''">
   ...
</div>

Returning to a previous version actually works, but sadly it's not the best way. I think AlpineJS is great, but if I can no longer benefit from updates, it is very sad.

@HugoDF

Please, please solve the problem!

[HugoDF]

I've fixed the first issue encountered in a PR but I'm not sure we'll be able to make observable-membrane compatible with IE11, one for @calebporzio though

[DannyEndert]

I've fixed the first issue encountered in a PR but I'm not sure we'll be able to make observable-membrane compatible with IE11, one for @calebporzio though

In the meantime, I'm using version 2.0.2. So far it works great!

[calebporzio]

Sorry for this issue folks. It's because of a Proxy trap that observable-membrane uses but isn't supported in the proxy-polyfill.

I will do my best to get IE11 back working as best and fast as I can. There are no ideal solutions at the moment, but I will re-surface with something soon.

[calebporzio]

Ok, this should be fixed.

I will be better about testing future releases in IE11 (probably just purchase a subscription to lambda test and test there manually for now.). At some point, it'd be nice to have automated IE11 tests, but I'd like to hold off on the extra overhead with those kinds of tests.

Sorry about this. Thanks, everyone for chiming in and pitching in.