Livewire 3 Pagination does not update page after click

Question

I just upgraded the Livewire Version of my project from 2 to 3 and followed the complete upgrade guide.

Now when i check my sites and test the paginators, they do not work anymore. I got a site with 3 different paginators on it so i gave them a unique name each.

If i click the "next" button of my paginator the url parameter does change and it also scrolls to the top of the page like it should be in the new version but it does not show the next page and does not update the buttons to the new position.

If i change the URL Parameter by hand it works.

Also there is an error in my browsers console: Uncaught TypeError: currentNode is null

Here's the code of my paginator:

<?php

namespace App\Http\Livewire\Admin;

use App\Models\RevisaInvoice;
use Livewire\Component;
use Livewire\WithPagination;

class RevisaInvoicesList extends Component
{
    use WithPagination;

    public string $filenameSearch = '';
    public string $companySearch = '';
    public string $dateSearch = '';
    public bool $showProcessed = false;

    public function render()
    {
        return view('livewire.admin.revisa-invoices-list', [
            'revisaInvoices' => RevisaInvoice::final()
                ->where('filename', 'LIKE', '%'.$this->filenameSearch.'%')
                ->whereHas('client', function ($q) {
                    $q->where('name', 'LIKE', '%'.$this->companySearch.'%');
                })
                ->where('created_at', 'LIKE', '%'.$this->dateSearch.'%')
                ->where('is_processed', $this->showProcessed)
                ->orderBy('is_processed')
                ->orderByDesc('created_at')
                ->paginate(8, pageName: 'revisa-invoices')
        ]);
    }

    public function updated(): void
    {
        $this->resetPage();
    }

    public function toggleProcessed(RevisaInvoice $revisaInvoice): void
    {
        $revisaInvoice->toggleProcessed();
    }
}
```blade

And of course the Blade:

<div class="mt-2">
    <label>
        <input wire:model.live="showProcessed" type="checkbox" class="rounded border-gray-400 placeholder-gray-200 mr-1 -mt-[2px]">
        <span>{{ __('Show processed invoices') }}</span>
    </label>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
    @forelse($revisaInvoices as $revisaInvoice)
        <div class="relative mt-5" wire:key="revisaInvoice--{{ $revisaInvoice->id }}">
            <div onclick="return confirm('Are you sure?') || event.stopImmediatePropagation()"
                 wire:click="toggleProcessed({{ $revisaInvoice }})"
                 class="absolute cursor-pointer -bottom-[12px] -right-[12px] px-[5px] py-[3px] bg-white rounded-full border group shadow z-10 {{ $revisaInvoice->is_processed ? 'hover:border-danger-700' : 'hover:border-success-700' }}"
                 tabindex="0"
                 title="{{ $revisaInvoice->is_processed ? __('Mark as unprocessed') : __('Mark as processed') }}">
                @if($revisaInvoice->is_processed)
                    <i class="fa-solid fa-times fa-fw group-hover:text-danger-700"></i>
                @else
                    <i class="fa-solid fa-check fa-fw group-hover:text-success-700"></i>
                @endif
            </div>

            <div class="border rounded shadow relative {{ $revisaInvoice->is_processed ? 'border-success-400' : '' }}">
                <a class="flex items-center text-primary-800 hover:text-secondary-400 p-3 rounded-t border-b {{ $revisaInvoice->is_processed ? 'bg-success-100' : '' }}"
                   href="{{ route('admin.invoices.download', ['revisa', $revisaInvoice->id]) }}"
                   title="{{ __('Download') . ': ' . $revisaInvoice->filename }}">
                    <i class="fa-solid fa-file-pdf text-2xl"></i>
                    <span class="ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ $revisaInvoice->filename }}</span>
                </a>

                <div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2">
                    <small class="text-gray-300 block">{{ __('From') }}</small>
                    <span>{{ $revisaInvoice->client->name }}</span>
                </div>

                <div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2 rounded-b">
                    <small class="text-gray-300 block">{{ __('Created at') }}</small>
                    <span>{{ date('d-m-Y', strtotime($revisaInvoice->created_at)) }}</span>
                </div>
            </div>
        </div>
    @empty
        <div class="mt-3 col-span-4">
            <x-alert type="warning">{{ __('No invoices') }}</x-alert>
        </div>
    @endforelse
</div>

<div class="mt-5">
    {{ $revisaInvoices->links() }}
</div>

```

I already tried to remove the names and just use a single paginator but that does not solve it.

Edit: I just saw that the first of my elements gets changed but the others stay as before.

Answer 1

With the help of the Laravel Daily team the solution is found.

It's the Livewire version. Somehow when upgrading it turned out to be livewire/livewire": "3.0" flat instead it should be livewire/livewire": "^3.0" to include the latest fixes. After executing composer update all worked out as it should.

Answer 2

I believe this has something to do with importing Alpine in the resources/js/app.js I had this issue for a long time and it was cause by this specific line window.Alpine = Alpine; in this code:

import Alpine from 'alpinejs';
window.Alpine = Alpine;  // THIS LINE
Alpine.start();

try removing it and it should work just fine. If not, make sure that you added the @livewireStyles and @livewireScripts in the head and body of your project. There is a different way of importing Alpine in the resources/js/app.js which is as follow:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
Livewire.start()

According to the new documentation, Alpine comes with livewire, but instead of @livewireScripts, now you have to use @livewireScriptConfig