Alpine: IE11 and Extracted Component Logic not working

Created on 6 Mar 2020 · 7Comments · Source: alpinejs/alpine

Issue description

When using AlpineJS in IE11, utilising the IE11 version of the Alpine script via CDN or as part of a bundle, it won't register the extracted component logic or work like it does in other browsers.

Steps to reproduce the issue

Make sure you're running IE11 on a Windows 10 machine or VM.
Paste the following code into a .html document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div x-data="teamProfileModal()">
        <button @click="openModal()">Open</button>
        <div x-show="isOpen()">
            <h1>This is content</h1>
            <p>This is content description.</p>
            <button @click="closeModal()">Close</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.js" defer></script>
    <script>
        function hideBodyOverflow() {
            document.body.style.overflow = 'hidden'
        }
        function showBodyOverflow() {
            document.body.style.overflow = 'visible'
        }
        function teamProfileModal() {
            return {
                open: false,
                openModal() { this.open = true, hideBodyOverflow() },
                closeModal() { this.open = false, showBodyOverflow() },
                isOpen() { return this.open === true },
            }
        }
    </script>
</body>
</html>

Save & Open the file in the browser.

What's the expected result?

When the page loads, we're expecting the header, content and close button to be hidden and only the 'Open' button should be visible on the page.

What's the actual result?

All elements are shown on the page due to Alpine not being able to work.

Additional details / screenshot

I could not provide a CodePen due to IE11 not being supported by CodePen.

This is how the page look when loading in IE11:

These are the console errors that IE11 is spitting out:

This works in other browsers including Edge, just not IE11.

It's worth noting that this was previously working on the 25th Feb 2020, but I was testing via Browserstack and I'm not sure if Browserstack does something to make Alpine work, or if this has always been broken. I've only recently started testing via a VM.

Source

mrmathewc

Most helpful comment

I've had another look and I think the issue is with your code not Alpine.js see the following (as per your example):

function teamProfileModal() {
  return {
    open: false,
    openModal() { this.open = true, hideBodyOverflow() },
    closeModal() { this.open = false, showBodyOverflow() },
    isOpen() { return this.open === true },
   }
}

IE11 doesn't support object shorthand properties/functions see https://caniuse.com/#search=Object%20shorthand

Solution is to use long hand notation for openModal, closeModal and isOpen

function teamProfileModal() {
  return {
    open: false,
    openModal: function() { this.open = true, hideBodyOverflow() },
    closeModal: function() { this.open = false, showBodyOverflow() },
    isOpen: function() { return this.open === true },
  }
}

HugoDF on 6 Mar 2020

🎉1 👍1

All 7 comments

The latest build breaks on IE11

HugoDF on 6 Mar 2020

👍1

You can pin to 2.0.2 and it should work

HugoDF on 6 Mar 2020

The latest build breaks on IE11
You can pin to 2.0.2 and it should work

That should explain it, thank you! I'll give it a go! 😀

mrmathewc on 6 Mar 2020

See this issue https://github.com/alpinejs/alpine/issues/241 PR is open to fix this

Let me know if dropping down to 2.0.x fixes your issue or if there's an outstanding IE11 issue

HugoDF on 6 Mar 2020

See this issue #241 PR is open to fix this

Let me know if dropping down to 2.0.x fixes your issue or if there's an outstanding IE11 issue

Hi @HugoDF thanks for your detailed responses, it's much appreciated.

I have tried dropping down the versions and the issue still exists.

mrmathewc on 6 Mar 2020

👍1

I've had another look and I think the issue is with your code not Alpine.js see the following (as per your example):

function teamProfileModal() {
  return {
    open: false,
    openModal() { this.open = true, hideBodyOverflow() },
    closeModal() { this.open = false, showBodyOverflow() },
    isOpen() { return this.open === true },
   }
}

IE11 doesn't support object shorthand properties/functions see https://caniuse.com/#search=Object%20shorthand

Solution is to use long hand notation for openModal, closeModal and isOpen

function teamProfileModal() {
  return {
    open: false,
    openModal: function() { this.open = true, hideBodyOverflow() },
    closeModal: function() { this.open = false, showBodyOverflow() },
    isOpen: function() { return this.open === true },
  }
}

HugoDF on 6 Mar 2020

🎉1 👍1

No way! I swear I tried this, obviously I've implemented it wrong. Thank you so much Hugo! Works as expected.

mrmathewc on 6 Mar 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings