Cannot redefine non-configurable property '$wire'

[ali-awwad]

Hi;

I have installed a new fresh Laravel 8 that comes with Livewire and Alpinejs preinstalled.

For IE11 support I followed the documentation by using

<!-- Scripts -->
    @if (is_ie())
        <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
        <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer>
        </script>
    @else
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.js" defer></script>
    @endif

however, a simple example of burger menu open & close

<div id="top-menu" class="block lg:hidden px-3 bg-white" x-data="{ menuOpen: false }">
            <div class="flex">
                <svg @click="menuOpen = !menuOpen" viewBox="0 0 20 20"
                    :class="{'text-adnec-300':menuOpen,'text-gray-500':!menuOpen}">
                    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
                        <g id="icon-shape">
                            <path
                                d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z"
                                id="Combined-Shape"></path>
                        </g>
                    </g>
                </svg>
                <a href="{{ route('home') }}" title="{{ __(config('app.name')) }}" class="flex-grow">
                    <img src="{{ asset('images/logo.svg') }}" class="h-16 mx-auto" alt="">
                </a>
            </div>
            <div class="hidden" :class="{'block':menuOpen,'hidden':!menuOpen}">
                <x-nav></x-nav>
            </div>
        </div>

But it shows the following error in IE11 :
SCRIPT5078: Cannot redefine non-configurable property '$wire'

Removing @livewireScripts solves the issue , but I have to use Livewire with my project.

[HugoDF]

For IE11 support you only need

<script type=​"module"​ src=​"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"​></script>
<script nomodule src=​"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js"​ defer>
        </script>

No need to detect IE using Blade/Laravel

[SimoTod]

It's a known issue with custom properties injected by third parties such as livewire's $wire. There is already a fix in master which will be released in the next release.
If you need to try it in advance while developing, you can use https://cdn.jsdelivr.net/gh/alpinejs/alpine@master/dist/alpine-ie11.min.js for your legacy build. Make sure you update the link as soon as the next release is out to avoid unexpected regressions in production.

[ali-awwad]

@HugoDF I use IE detection just to reduce file size on most people browsers as it is not needed there.

@SimoTod I am still getting the same error even if using the mentioned master js file.

[SimoTod]

Modern browsers do not download scripts with the nomodule attribute and legacy browsers won't download the version with type="module". Serverside browser detection is less reliable and as Hugo said not needed.

I need to check tomorrow, the current build was actually defining custom properties twice in IE but, due to a required polyfill, it was triggering that error. The fix should prevent it. I'll let you know when I get a chance to look into it.

[SimoTod]

@ali-awwad the fix is in master but the maintainer hasn't recompiled the build folder so you can't try it using that link, unfortunately. You have to wait for the next release.

[agedengaku]

I'm having the same problem. Any word on when that next release is happening?

[ryangjchandler]

Tagging @calebporzio in here - @agedengaku I'd imagine a new release will be out soon, it's been a month or so since the last one, but I know Caleb has been very busy.

[agedengaku]

@ryangjchandler Thank you for getting back to me. Hope that release comes soon. Thanks in advance @calebporzio .

[SjorsO]

I can confirm that this problem is fixed when upgrading from 2.7.0 to 2.7.3

[HugoDF]

Cool! I think we're good to close this then?

[epileftro85]

I have 2.7.3 version, fresh install with laravel and livewire, my compiles app is in the header, I want to so some click function but I got this error.

[ryangjchandler]

I have 2.7.3 version, fresh install with laravel and livewire, my compiles app is in the header, I want to so some click function but I got this error.

Have you got a defer attribute on the <script> tag?

[epileftro85]

Yes I did, sorry for the false alarm

[davidwebca]

I'm having this issue with built-in dollar-sign attributes (or so it seems?). I'm not using livewire.

<div x-init="without($el, '.banner,.banner-title')" x-data="adaptHeight()">

function adaptHeight() {
    return {
        elementsToRemove: null,
        without: function($el, selectors) {
            this.elementsToRemove = document.querySelectorAll(selectors);
            this.adjust($el);
        },
        adjust: function($el) {
            $el.style.minHeight = '';
            let height = 0;
            if(this.elementsToRemove.length) {
                for (let i=0, il=this.elementsToRemove.length; i < il; ++i) {
                    let elementToRemove = this.elementsToRemove[i];
                    height+=elementToRemove.getBoundingClientRect().height;
                }
            }
            $el.style.minHeight = 'calc(100vh - ' + height + 'px)';
        }
    }
}

TypeError: Cannot redefine non-configurable property '0'

What's the fix that was added earlier? Maybe I can take a look at the change and see if I can help.