Alpine: the object does not manage the action push on IE

[RomainoSoko]

Hi everyone !

I've detected an issue when we are using the push method on IE.

<div x-data="{states: []}">
        <button @click="states.push('item')">Add item</button>
        <button @click="states = []">Remove item</button>
        <div x-show="states.includes('item')">Visible because there is something inside states</div>
    </div>

When we click on the "Add item" button, IE return the error : "The object does not manage the action" and if i look into the code preview that handle the error i can see that its because of the push method.

I've tried to use a polyfill found on : https://stackoverflow.com/questions/31533963/polyfill-for-push-method-in-javascript
I've also tried with spread operator, but it looks like its not supported.

You can try it by copying these lines of code.

I hope that there is a way to do this on IE anyway.

Thanks in advance :),

[ryangjchandler]

Hi @RomainoSoko - I don't believe this problem is related to Alpine in any way. From your description, it sounds like a problem with your environment / browser.

[SimoTod]

You can try concat and reassign the variable, if it's due to the reactivity layer (I can't test it because i don't use window).
Something like
@click="states = [].concat(states, ['item']) "

[ryangjchandler]

@RomainoSoko I'd try the suggestion from @SimoTod - it's quite hard to test since CodePen and JSFiddle don't support IE.

[RomainoSoko]

Alright guys ! The @SimoTod method work very good and it solve the problem. After that i've had the same issue with de pop and slice method (for removing values from states array) but i've fixed it with filter method.

I don't really know/understand if it comes from my config/environment but it is very strange :/.

Anyway, thank you very much !

[HugoDF]

@RomainoSoko part of it is that the reactive layer for IE11 uses an alpine-specific system which isn't super robust eg. It doesn't detect mutations that don't reassign the variable (eg. Pop, push, direct index access assignment)

This system was buggy enough that it was dropped it in favour of a package maintained by Salesforce for the non IE11 build. Unfortunately said package doesn't support IE11 due to its usage of Proxy in a way that can't adequately be polyfilled so IE11 is stuck with the below par reactive layer

[HugoDF]

Closing this issue for now as per last comment, this is a limitation of the reactivity system that we use for IE11 (there are Proxy features we can't polyfill so we can't use the same system as non-IE build).

If anyone runs into this kind of issue in future, feel free to reopen or comment.

Current workarounds for IE11 are:

• myVar.push(data) -> myVar = myVar.concat(data)
• myVar.pop() -> myVar = myVar.slice(0, -1)
• myVar.unshift(data) -> myVar = [].concat(data, myVar)
• myVar.shift() -> myVar = myVar.slice(1)