Could not check compatibility Error

Hello,

Hopefully, someone can help.

I am having an error that is driving me mad! I'm sure there's something I am doing wrong but I have followed the documentation and even copied the example code (replacing it with my Bookings Model) and it still doesn't work.

I was using the Master branch from MedicOneSystems now have removed that package replacing it with this one, I have upgraded to Livewire 3 so need compatibility. I have the MedicOneSystems package working perfectly, but I'm struggling since replacing it with this package! Are there any major differences?

I am getting the following error:

Could not check compatibility between App\Livewire\Datatables\BookingsTable::builder(): App\Livewire\Datatables\Builder and Arm092\LivewireDatatables\Livewire\LivewireDatatable::builder(): Illuminate\Database\Eloquent\Builder, because class App\Livewire\Datatables\Builder is not available

Livewire\Datatables\BookingsTable

namespace App\Livewire\Datatables;

use App\Models\Booking;
use Arm092\LivewireDatatables\Column;
use Arm092\LivewireDatatables\DateColumn;
use Arm092\LivewireDatatables\NumberColumn;
use Arm092\LivewireDatatables\LabelColumn;
use Arm092\LivewireDatatables\Livewire\LivewireDatatable;

class BookingsTable extends LivewireDatatable
{

    public function builder(): Builder
    {
        return Booking::query()
        ->Join('clients as c', 'client_id', 'c.id')
        ->Join('towns as t', 'town_id', 't.id');
    }

    public function getColumns(): array|Model
    {
        return [
            NumberColumn::name('id')
            ->label('ID'),

            Column::name('ref')
            ->label('Ref')
            ->searchable(),

            Column::name('c.name')
            ->label('Client')
            ->searchable(),

            Column::name('t.name')
            ->label('Booking Area'),

            DateColumn::name('start')
           ->label('Start'),

           DateColumn::name('end')
           ->label('End'),

        ];
    }
}

Blade File

<x-app-layout>
    @push('page-css')

    @endpush

    <x-slot name="header">
        <h2 class="font-semibold text-xl text-white-800 leading-tight">
            {{ 'Bookings' }}
        </h2>
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </x-slot>

    <body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">

        <!--Container-->

        <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Card -->
  <div class="flex flex-col">
    <div class="-m-1.5 overflow-x-auto">
      <div class="p-1.5 min-w-full inline-block align-middle">
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
          <!-- Header -->
          <div class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-b border-gray-200 dark:border-gray-700">
            <div>
              <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                Bookings
              </h2>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Add bookings, edit and more.
              </p>
            </div>

            <div>
              <div class="inline-flex gap-x-2">

                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="{{route('booking.create')}}">
                  <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M2.63452 7.50001L13.6345 7.5M8.13452 13V2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                  New Booking
                </a>
              </div>
            </div>
          </div>

            <!--Card-->
            <div class="table-responsive p-8 mt-6 lg:mt-0 rounded shadow bg-white">

              <livewire:datatables.bookings-table/>

            </div>
        </div>

        <!--/Card-->

        </div>
        <!--/container-->
        @push('scripts')

        @endpush

</x-app-layout>

Thank you for any help :)

arm092 / livewire-datatables

Could not check compatibility Error #16