Uncaught TypeError: can't redefine non-configurable property "$nextTick"

[svirmasalo]

Hi,

I'm facing the following problem when upgrading from v2 to V3 that I can't resolve.

1. Error message from console:

Uncaught TypeError: can't redefine non-configurable property "$nextTick"
    Z cdn.min.js:256
    Z cdn.min.js:254
    <anonymous> cdn.min.js:2004
    U cdn.min.js:611
    r cdn.min.js:388
    n cdn.min.js:393
    It cdn.min.js:396
    O cdn.min.js:585
    jt cdn.min.js:555
    jt cdn.min.js:554
    <anonymous> cdn.min.js:2267
    VoidFunction* cdn.min.js:2266
    <anonymous> cdn.min.js:2269
cdn.min.js:formatted:256
    ObjectOrReflectDefineProperty self-hosted:2632
    defineProperty self-hosted:2683
    Z cdn.min.js:256
    forEach self-hosted:205
    Z cdn.min.js:254
    <anonymous> cdn.min.js:2004
    U cdn.min.js:611
    bind_applyFunctionN self-hosted:1373
    <anonymous> self-hosted:1336
    r cdn.min.js:388
    n cdn.min.js:393
    It cdn.min.js:396
    O cdn.min.js:585
    jt cdn.min.js:555
    forEach self-hosted:205
    jt cdn.min.js:554
    <anonymous> cdn.min.js:2267
    (Async: VoidFunction)
    <anonymous> cdn.min.js:2266

Debugger points the error to this function inside Alpine.js:

function injectMagics(obj, el) {
  Object.entries(magics).forEach(([name, callback]) => {
    Object.defineProperty(obj, `$${name}`, { // <-- error message: TypeError: can't redefine non-configurable property "$nextTick"
      get() {
        return callback(el, {Alpine: alpine_default, interceptor});
      },
      enumerable: false
    });
  });
  return obj;
}

Note: I'm not using $nextTick magic function anywhere on the project.

2. How Alpine is included to the project:
Alpine is included via CDN as follows: <script defer src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js"></script>

Note that using the jsdelivr.net CDN and Alpine V2 the error did not occur. V2 CDN source: src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"

3. When the error occurs:
The error comes when an looped item that calls function object stored in window is present. The first element of the loop works without this error but the ones after that won't.

liquid:

{% for product in collection %}
  <div class="product-card">
    <!-- Stuff and things -->
    <div class="tw-border-top tw-border-brand-gray-100" x-data="window.partialPaymentCalculator" x-init="start_partial_payment('{{priceForPartialPayment}}')">    
      <span aria-label="Price from" class="tw-hidden md:tw-inline-block tw-text-xs tw-px-4 tw-py-2 tw-text-brand-gray-600" >Price from. <price x-text="MONTHLY_PAYMENT"></price>€/month</span>
    </div>
  </div>
{% endfor %}

partialPaymentCalculator function:

const partialPaymentCalculator = {
    STATIC_TIME: 0,
    STATIC_PRICE: 0,
    STATIC_INTREST: 0.016, // 1,6%
    STATIC_INVOICE_PAYMENT: 3.8, // €,
    MONTHLY_PAYMENT: 0,
    TIME_OPTIONS:[36,24,12,6,3],
    calc_sum() {
        const downPayments = [];
        const {
            STATIC_INVOICE_PAYMENT,
            STATIC_INTREST,
            STATIC_PRICE,
            STATIC_TIME,
            calc_intrest, 
            calc_actual_payment, 
            calc_debt
        } = this;
        let debt = STATIC_PRICE;
        for(let i = 0; i < STATIC_TIME; i++) {
            let intrest = calc_intrest(debt, STATIC_INTREST);
            downPayments[i] = calc_actual_payment(Math.round(STATIC_PRICE/STATIC_TIME), intrest, STATIC_INVOICE_PAYMENT);
            // Update debt 
            debt = calc_debt(Math.round(STATIC_PRICE/STATIC_TIME), debt);
        }
        // Return average from all
        return [...downPayments].reduce((a,v,i)=>(a*i+v)/(i+1));
    },
    calc_debt(decrease, currentDebt) {
        return Math.round(currentDebt - decrease);
    },
    calc_intrest(currentDebt, intrest) {
        return Math.round(currentDebt * intrest);
    },
    calc_actual_payment(db, i, ip){
        return Math.round(db + i + ip);
    },
    update_monthly_payment(time) {
        this.set_time(time);
        this.set_monthly_payment(Math.round(this.calc_sum()));
    },
    set_time(months){
        this.STATIC_TIME = months;
    },
    set_price(cents) {
        this.STATIC_PRICE = cents / 100;
    },
    get_time(){
        return this.STATIC_TIME;
    },
    get_price() {
        return this.STATIC_PRICE;
    },
    get_default_time(price){
        if (price < 30000) {
            return 3;
        }
        if (price >= 30000 && price < 40000) {
            return 6;
        }
        if (price >= 40000 && price < 60000) {
            return 12;
        }
        if (price >= 60000 && price < 100000) {
            return 24;
        }
        if (price >= 100000) {
            return 36;
        }
    },
    start_partial_payment(price, fromDynamic = false) {
        console.log(price);
        if (!!fromDynamic) {
            const formattedPrice = parseFloat(price) * 100;
            this.STATIC_TIME = this.get_default_time(formattedPrice);
            this.STATIC_PRICE = formattedPrice / 100;
        } else {
            this.STATIC_TIME = this.get_default_time(parseFloat(price));
            this.STATIC_PRICE = parseFloat(price) / 100;
        }
        this.set_monthly_payment(Math.round(this.calc_sum()));
    },
    set_monthly_payment(sum) {
        this.MONTHLY_PAYMENT = sum;
    }
}
// Include partial payment calculator to window to be used via alpine or similar
window.partialPaymentCalculator = partialPaymentCalculator;

Any help is greatly appreciated 🙏

[KevinBatdorf]

Could you be loading the CDN twice?

[svirmasalo]

Unfortunately this did not work either.

I also went from CDN to import Alpine from 'alpinejs'; -way and the same problem stays.

[KevinBatdorf]

I think it's related to the data object.

Maybe try converting partialPaymentCalculator to use the syntax here: https://alpinejs.dev/directives/data#re-usable-data

[svirmasalo]

Tried, but no. The error at the console and debugger stays the same:

function injectMagics(obj, el) {
  Object.entries(magics).forEach(([name, callback]) => {
    Object.defineProperty(obj, `$${name}`, {  // <-- error message: TypeError: can't redefine non-configurable property "$nextTick"
      get() {
        return callback(el, {Alpine: alpine_default, interceptor});
      },
      enumerable: false
    });
  });
  return obj;
}

[KevinBatdorf]

Can you remove stuff until it works by any chance? It must be something specific to your code, so just need to identify what that is. Nothing else stands out to me.

[svirmasalo]

Thanks Kevin for your help!

Got it to work by doing the following based on your suggestion to use the reusable data as follows:

// Include partial payment calculator to Alpine.data for reusability
document.addEventListener('alpine:init', () => {
    Alpine.data('partialPaymentCalculator', () => ({...partialPaymentCalculator}));
}); 

// Include partial payment calculator to Window
window.partialPaymentCalculator = {...partialPaymentCalculator};

It was essential to use the object spread, otherwise it would not have worked along with one stored inside window object. I think I need to refactor my code to make things cleaner tho.

Thanks for your help! 🙏

[svirmasalo]

Solution: Transform function into re-usable form: https://alpinejs.dev/directives/data#re-usable-data

// Include partial payment calculator to Alpine.data for reusability
document.addEventListener('alpine:init', () => {
    Alpine.data('partialPaymentCalculator', () => ({...partialPaymentCalculator}));
}); 

// Include partial payment calculator to Window
window.partialPaymentCalculator = {...partialPaymentCalculator};

[Igloczek]

The solution above only works if you don't use getters.

The version below does work with getters.
But, keep in mind, it won't work properly with nested getters.

document.addEventListener('alpine:init', () => {
  Alpine.data(component.name, () =>
    Object.create(
      Object.getPrototypeOf(component.data),
      Object.getOwnPropertyDescriptors(component.data)
    )
  )
})

[ekwoka]

just make the partialPaymentCalculator in the function directly.

[npodbielski]

In my case it was caused by having x-data attribute with the same expression in two tags. Something like that:

<div>
<template x-data="$store.contentChooser" x-if="isContent1">Content 1</template>
<template x-data="$store.contentChooser" x-if="isContent2">Content 2</template>
</div>

I just changed it to:

<div  x-data="$store.contentChooser">
<template x-if="isContent1">Content 1</template>
<template x-if="isContent2">Content 2</template>
</div>

And it worked but I do not remember limitation that you cannot reuse store in x-data attribute in documentation.
Some better exception message would be nice.

[SimoTod]

Stores are global scopes, x-data is a local scope. I would not put a store in an x-data tag since it could potentially have side effects due to the magic being injected and being bound to the element were you use the store.

The expected way to use a store is

<template x-if="$store.contentChooser.isContent1">Content 1</template>

(with an x-data from the parent or you can add an empty x-data on the same DOM elements) as shown here: https://alpinejs.dev/globals/alpine-store#accessing%20stores.

[npodbielski]

@SimoTod thanks that is good to know.
Then it would be nice to have somewhere in the docs real world example of remote data fetching and binding it to HTML.
I found somewhere an example with usage of Alpine.Store which seems like bad decision now.

[ekwoka]

You just get it normally, using a method (like the init) in your data component.

[npodbielski]

Sure @ekwoka I understand that now.
What I tried to say that official Alpine JS docs lacks a bit in this matter so clueless people (like myself) may search elsewhere, do it wrong and then come back here to ask for help. 😄

So maybe this should be included in the docs for newbies, so such problems would never be encountered.
Or maybe x-data should prevent binding a store with some meaningful exception message?

Just my 2 cents, guys.