alpine: Stopped working on IE11

Hello,

It seems that after the transition to rollup and newer features, alpinejs is not working in IE11 with the current polyfills.

I am getting the error:

Expected ')'

at this line in utils.js

export function walkSkippingNestedComponents(el, callback, isRoot = true) {

I then tested on a branch after the transition to rollup (1.1.3) and got it to work by changing babel.config.js to the following

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: "> 0.5%, ie >= 11"
        },
        modules: false,
        spec: true,
        useBuiltIns: "usage",
        forceAllTransforms: true,
        corejs: {
          version: 3,
          proposals: false
        }
      }
    ]
  ]
};

this increases the build size, but gets it to work for testing purposes.

I then tested the same configuration on the current build (1.7) and I now get the following error

Uncaught (in promise) TypeError: Cannot create property for a non-extensible object

Seems like an error with the proxy polyfill when researching that error.

<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

I also tested by adding Laravel Mix back and the same object error still occurs.

Wondering if anyone else has gotten a recent build to work with IE11?

Thanks.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 37 (15 by maintainers)

Most upvoted comments

@SimoTod thanks that advice helped! I added a classlist polyfill and transitions work great now.

thanks for the tip for the IE11 condition check that you added earlier.

Branch is updated with additional checks for window.document.documentMode on the changes we made.

known issues

x-if / x-template not working
x-for not working

keyurshah on Feb 6, 2020

Since it’s not working on IE11 now, might be worth updating the readme – is there any point in documenting that polyfills are needed when they won’t make it work?

timrspratt on Feb 3, 2020

@keyurshah I’ve set up a win VM and I think we got the last piece of the puzzle as well. Template is not natively supported, but polyfill.io has a polyfill for it: HTMLTemplateElement.

Just tried and it seems to work. This was my polyfill configuration:

<script src="https://polyfill.io/v3/polyfill.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set%2CString.prototype.startsWith%2CArray.prototype.find%2CArray.prototype.findIndex%2CElement.prototype.closest%2CElement.prototype.remove%2CCustomEvent%2CElement.prototype.classList%2CHTMLTemplateElement"></script>

SimoTod on Feb 6, 2020

The code looks close to the original. The if condition we added in the ref function is already running only on IE11.

About the transitions, it seems that IE11 doesn’t support classList.add() with multiple params (the spread operator converts an array to a list of variables). -> https://caniuse.com/#feat=classlist

You can probably try to achieve the same with .className = "your classes, original + what you need to apply, space separated". Or loop on the class array and add them one by one (although it might stress the browser a bit more).

SimoTod on Feb 6, 2020

Thank you so much for your hard work @SimoTod !

The tests are passing and a majority of the functionality seems to work well on this branch with your PR

This other branch is updated with the current master (had to change walkSkippingNestedComponents to walkAndSkipNestedComponents)

The items that don’t seem to work:

accessing the $refs object inside x-on or in a function gives an error. The example below gives an undefined error

<div x-data="{}">
  <div x-ref="foo">bar</div>
  <button x-on:click="console.log($refs.foo.innerText)">Click Here</button>
</div>

transitions do not work (Argument not optional) - utils.js - line 157
an item with multiple values, such as multiple checkboxes or multi select does not get all values
templates do not work for x-if

Most of these things seem that they can be worked around and is probably not worth anymore time.

If anyone wants to test out, just load the index_ie11.html from the branch and try it out.

Will wait to hear back from @calebporzio and see how he wants to handle these differing changes.

Thanks so much!

keyurshah on Jan 17, 2020