Livewire: Cannot read property 'fingerprint' of null

[jasontxf]

Description

The pagination only works the first time. After that it stops working. When I go into the console. This is the error I see.

Exact steps to reproduce

Followed https://laravel-livewire.com/docs/2.x/pagination to implement pagination

Include WithPagination

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class Files extends Component
{
    use WithPagination;

    public function render()
    {
        $files = authUser()->watchedFiles()->paginate(5);

        return view('livewire.files', [
            'files' => $files,
        ])->extends('layouts.app');
    }
}

Using the default pagination

{{$files->links()}}

When I monitored the network connection
I noticed that livewire included the fingerprint in the request.

Here's the response

Please let me know if you require any other info. Sorry, this is my first time posting an issue.

Context

• Livewire version: 2.2.6
• Laravel version: 7.28.3
• Browser: Chrome 85.0.4183.121

[amaelftah]

i faced the same issue too . but my case was pagination + searching

[jasontxf]

After troubleshooting for 9 hours,

I've finally found out what's the issue!

Firstly, the pagination display results in a table. Each row contains a nested component for the action column.
The issue happened because the nested component does not include a key identifier.

Once I've included it in, the pagination works!

// Before
<td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
    <livewire:files-table-actions :watched-file="$watchedFile" />
</td>

// After
<td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
    <livewire:files-table-actions :watched-file="$watchedFile" :key="$watchedFile->id"/>
</td>

Thank you for this wonderful framework!

[amaelftah]

@jasontxf i have the same issue while including the :key for the nested component . but am doing search also

[jasontxf]

@amaelftah Do you have a code snippet on how are you doing the search?

[amaelftah]

yes it;s just a basic search nothing fancy .and this case happens only when i copy a name and paste it inside the search input while on the same page that shows the item .

for example if i am on page 3 and the rendered item is "Ahmed Brand" . then when i paste "Ahmed Brand" inside the search input it shows the same error while the request payload is correct

class SelectBrandToShoutout extends Component
{
    use WithPagination;

    public string $channel;

    public string $search = '';

    protected $queryString = [
        'search' => ['except' => ''],
        'page' => ['except' => 1],
    ];

    public function mount()
    {
        $this->fill(request()->only('search', 'page'));
    }

    public function render(GetMatchesQueryLivewireCriteria $criteria, GetMatchesQueryLivewire $query)
    {
        if ($this->search) {
            $this->resetPage();
        }

        $criteria->setType(GetMatchesQueryLivewireCriteria::HOSTING)
            ->setForTeamId(my_team()->id)
            ->setSearch($this->search)
            ->setPaginatePerPage(1);

        return view('livewire.shoutout.select-brand-to-shoutout', [
            'teams' => $query->setCriteria($criteria)->execute(),
        ]);
    }
}

inside livewire.shoutout.select-brand-to-shoutout

<input wire:model.debounce.200ms="search" >

 @foreach ($teams as $team)
        <livewire:matching.card :channel="$channel" :key="$team->id" :team="$team"/>
  @endforeach

[jasontxf]

@amaelftah I might have the solution to your problem. I think $this->resetPage() should not be in render(). Instead, it's probably better to put it in updated()

public function updated($name)
{
    if ($name === 'search') {
        $this->resetPage();
    }
}

Give it a try :)

[amaelftah]

@jasontxf thanks for the suggestion i tried it bu it didn't work and produced the same error :cry:

[jasontxf]

@amaelftah After trying out multiple results in the wire:model, I manage to hit your error too. This is so bizarre...

[amaelftah]

@jasontxf i feel it's something with pagination inside livewire . so it needs some deep digging into the core

[jasontxf]

@amaelftah I think I've figured it out.

I noticed when the result is returning properly, this happened

and when the error appear, this is what I see

So I'm guessing the nested component for some reason is being generated twice.
It might be because it has the same id for key.

So I tried this hacky method to always generate a different key

@php
    $randomKey = time().$watchedFile->id;
@endphp
<livewire:files-table-actions :watched-file="$watchedFile" :key="$randomKey"/>

and I'm no longer facing the issue.

I'm not sure why is the previous nested component not clearing itself.

Perhaps @calebporzio could point us to what are we doing wrongly :)

[amaelftah]

@jasontxf your solution worked perfectly . you are awsome man thanks a lot :clap:

[jasontxf]

@amaelftah Glad to hear that! :) You are most welcome!

Hopefully @calebporzio could show us the proper way of doing this.

[coxlr]

I just hit the same issue when deleting items from a table where each row is a nested livewire component. Adding a timestamp to the key as @jasontxf suggested fixed my issue.

<livewire:accounts-item :account="$account" :key="time().$account->id"/>

It would be good to know if there a proper way to handle this.

[jasontxf]

@coxlr I didn't know I could run PHP expression within :key! Thanks for helping to shorten my fix :)

[dniccum]

I am currently getting this as well with a for loop within a component. I have tried adding the key attribute to my loop with no luck.

 wire:key="{{ $loop->index }}"

[coxlr]

@dniccum try using just :key="time().$loop->index" instead of wire:key="{{ $loop->index }}"

[jasontxf]

@dniccum Does the workaround works for you?

:key="time().$loop->index"

[dniccum]

Just updated my code and I am still getting the same Javascript error.

@foreach($plans as $plan)
    <div wire:click="selectPlan('{{ $plan->plan }}')" :key="{{ $loop->index }}">
        <!-- content here -->
    </div>
@endforeach

The parent component is this:

<x-jet-dialog-modal wire:model="showCreate">
        <x-slot name="title">
            <div class="text-gray-400 font-light text-sm">Select the plan that you would like.</div>
        </x-slot>
        <x-slot name="content">
            <div>
                <livewire:plan-select />
            </div>
        </x-slot>
        <x-slot name="footer">

        </x-slot>
</x-jet-dialog-modal>

[jasontxf]

@dniccum have you tried this?

@foreach($plans as $plan)
    <div wire:click="selectPlan('{{ $plan->plan }}')" :key="{{ time().$loop->index }}">
        <!-- content here -->
    </div>
@endforeach

[dniccum]

@jasontxf Unfortunately the same result.

[dniccum]

@coxlr @jasontxf Found the issue. This error occurs if you are loading Vue into the page (part of the default Laravel installation) IN ADDITION to the Livewire scripts tag. Remove Vue from the page and everything should work. This also solves an issue where the event emitters and listeners were colliding.

[jasontxf]

Unfortunately, that's not my case as I removed vue upon installation.

[calebporzio]

Closing this as the original issue has been resolved. Please re-submit a separate issue and reference it here for anything else. Thanks!