livewire: Cannot read property 'fingerprint' of null

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 Screenshot 2020-09-24 at 6 55 09 PM

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 10
Comments: 32 (6 by maintainers)

Most upvoted comments

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!

+53

jasontxf on Sep 24, 2020

@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 Screenshot 2020-09-25 at 2 03 46 AM

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 😃

+24

jasontxf on Sep 24, 2020

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.

+13

coxlr on Sep 25, 2020

I had a very similar issue, but i was not using wire:model.

I was facing the “fingerprint” issue when try to sort a paginated eloquent collection.

The solutions was to adding :key="now()->timestamp.$user->id" adding also wire:ignore in the root tag of the blade template with loop

rello86 on Aug 18, 2021

the time() fix described here, seems to force the entire list to re-render, as the id’s are regenerated each time. Meaning the entire DOM is being replaced each time.

I don’t think this is a fix.

Illizian on May 10, 2021

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

jasontxf on Sep 26, 2020

@amaelftah Glad to hear that! 😃 You are most welcome!

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

jasontxf on Sep 24, 2020

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

amaelftah on Sep 24, 2020

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.

that solved the problem, thank man I tried key(‘item-’.$item->id) put didn’t work

MAbughrara on Feb 4, 2021

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

calebporzio on Sep 30, 2020

@dniccum Does the workaround works for you?

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

jasontxf on Sep 28, 2020