Laravel Livewire 3清空搜索框时出现Uncaught TypeError错误求助

使用Laravel Livewire 3框架开发艺人搜索功能时，搜索流程正常，但清空搜索输入框全部内容后，控制台抛出错误：
Uncaught TypeError: Cannot read properties of null (reading 'before')

相关代码 #

视图代码 #

<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>

Livewire组件代码 #

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');
}

错误截图 #

问题排查与修复方案 #

1. 检查search查询作用域
   确保Artist模型中的search scope方法能正确处理空值，避免返回无效查询：

   public function scopeSearch($query, $search)
   {
       if (trim($search) === '') {
           return $query;
       }
       // 替换为你的实际搜索逻辑
       return $query->where('name', 'like', "%{$search}%");
   }
   

2. 初始化组件的search属性
   在Livewire组件类中给$search设置默认空字符串，防止其为null：

   public $search = '';
   

3. 处理空数据的DOM渲染
   在视图中添加空状态判断，避免分页组件在无数据时引发DOM异常：

   @if($artists->isEmpty())
       <div class="text-center py-8">暂无艺人数据</div>
   @else
       <!-- 艺人列表渲染代码 -->
       {{ $artists->links() }}
   @endif
   

4. 升级Livewire版本
   如果是框架已知bug，执行命令升级到最新版Livewire 3：

   composer require livewire/livewire:^3.0 --update-with-dependencies
   

内容的提问来源于stack exchange，提问作者Nik Patel