Datepicker: Alpine Expression Error: Cannot read properties of undefined (reading 'length')

[petermaas]

Describe the bug After setting the datepickers with values and saving them, the dates are shown properly but an alpine error is shown.

Screenshots or Videos

Desktop (If applicable, please complete the following information): Browser: chrome WireUI Version: 1.14.1 Laravel Version: 9.25.1 Alpine.js Version: 3.10.3 Livewire Version: 2.10.7

[PH7-Jack]

@petermaas What lang are you using? This error happens only when the livewire refresh the page after the request?

[petermaas]

Hi Jack,

What do you mean with "what lang"?

I was using a refresh after saving the page. But when I remove the refresh I still have the same error.

[PH7-Jack]

@petermaas

What do you mean with "what lang"?

I'm referring to your app.locale

[petermaas]

the app.locale = nl

[joaopalopes24]

@petermaas Try using nl_NL in app.locale.

[joaopalopes24]

Solve the problem?

[petermaas]

yes thx

[joaopalopes24]

Any question we are available. Thanks.

[malzariey]

Hello team,

The issue happens to me as well, for a different reason, once I delete an item in array. alpinejs triggers undefined to the old deleted datetimepicker

[joaopalopes24]

@malzariey Did you add wire:key to all components that use alpinejs?

[malzariey]

@malzariey Did you add wire:key to all components that use alpinejs?

Yes I did,

below an example:

<x-datetime-picker wire:model.defer="{{$end_modal}}" placeholder="{{$end_placeholder}}" without-timezone without-time parse-format="YYYY-MM-DD" display-format="MM-YYYY" class="h-12" wire:key="{{$end_modal}}" />

[joaopalopes24]

Can you share the HTML of the entire page?

[joaopalopes24]

Have you checked the language in the settings?

[malzariey]

Can you share the HTML of the entire page?

Here is the code used (Updated):

<div>
    @foreach( $this->datepickers as $index => $datepicker )
        <div>
            <x-errors class="mb-5"/>
            <div class="mt-5">
                <x-datetime-picker
                    wire:model.defer="datepickers.{{$index}}.date"
                    placeholder="add date"
                    without-timezone
                    without-time
                    parse-format="YYYY-MM-DD"
                    display-format="MM-YYYY"
                    class="h-12"
                    wire:key="datepickers.{{$index}}.date"

                />

            </div>

            <div class="mt-2">
                <x-button wire:click.prevent="deleteDate({{$index}})" flat negative
                          class="w-40"
                          label="{{__('global.delete')}}"/>
            </div>

        </div>
    @endforeach
        <div class="mt-2">
            <x-button wire:click.prevent="addDate" flat
                      label="{{__('messages.add_item')}}"/>
        </div>
</div>

and here is the livewire component code:

<?php
namespace App\Http\Livewire\Wizard;
use Illuminate\Support\Collection;
use Livewire\Component;
use function view;

class test extends Component
{
    public Collection $datepickers;
    public function mount(){
        $this->datepickers = new Collection();
        $this->addDate();
    }

    public function addDate()
    {
        $date = array('date' => null);
        $this->datepickers->push($date);

    }
    public function deleteDate($index)
    {

        $this->datepickers->forget($index);
    }
    public function render()
    {
        return view('livewire.form.test')
            ->layout('layout.aside', [
                'image' => 'education_info.svg',
                'title' => '',
                'subtitle' => '',
            ]);
    }
}

Have you checked the language in the settings?

Please note I have also tested the language settings. which is unrelated because the issue only triggers after the deletion of a component. What I believe is the problem, AlpineJS is not deleting old listeners after livewire re-renders and deletes an object of the array.

[joaopalopes24]

@malzariey You are not using wire:key in the select components, and you are using the same wire:key for two datetime-pickers.

[malzariey]

@malzariey You are not using wire:key in the select components, and you are using the same wire:key for two datetime-pickers.

Sorry @joaopalopes24, I edited the code with a simpler example above and the issue still happens after I click the delete button as shown below:

Thank you for your help.

[minhtamwebmaster]

@malzariey You are not using wire:key in the select components, and you are using the same wire:key for two datetime-pickers.

Sorry @joaopalopes24, I edited the code with a simpler example above and the issue still happens after I click the delete button as shown below:

Thank you for your help.

i have same issue