Uncaught TypeError: Cannot read properties of null (reading 'before') | Laravel | livewire 3

Question

I am using Laravel Livewire - 3

when I try to search the artist-related data it works fine but when I clear the whole input search data it gets the Uncaught TypeError: Cannot read properties of null (reading 'before') | livewire

 <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
        <x-jet-input class="mt-3 block w-full" wire:model.live.debounce.500ms="search" type="search"
            placeholder="{{ __('searchAttribute', ['attribute' => __('artists')]) }}" />
    </div>

component code

    public function render()
    {
        $this->query = new Artist();

        return view('livewire.admin.artist.index', [
            'artists' => $this->query->search($this->search)->orderBy('id', 'desc')->paginate(10)
        ])->layout('layouts.admin');
    }

After clearing the input search

Answer 1

I see there's a data table below the form in the image you posted, so I suspect your problem is the same that happened to me a few minutes ago: Livewire is getting lost while manipulating HTML elements between renders.

To solve that, you must add wire:key to HTML elements and :key="{{ $uniqueId }}" to Livewire components inside @foreach loops.

Example:

<!-- Before -->
<ul>
   @foreach($list as $item)
      <li>
         {{ $item->name }}
      </li>
   @endforeach
</ul>

<!-- After-->
<ul>
   @foreach($list as $item)
      <li wire:key='list_item_{{ $item->id }}'>
         {{ $item->name }}
      </li>
   @endforeach
</ul>

Source: https://livewire.laravel.com/docs/troubleshooting#adding-wirekey