Cannot read property 'fingerprint' of null error

#1

I’ve been learning to use livewire for about a month now. I had 3 livewire components sitting next to each other and things were running smoothly. I then tried to create an inifinite scroll which made me have to build a livewire component on top of the original 3 that i had. Now they became nested. I started to get the following error

“Cannot read property ‘fingerprint’ of null error”

I read some documentation and found that i was not placing keys on my nested livewire components. I put the keys and the infinite scroll started to work. Here is the wierd part… it only works sometimes… I would say 20% of the time i end up getting the error again at different points of scrolling down.
Anyone have any ideas why that would happen? I do use “time()” in my key so im assuming they are all unique.

Do i also have to put keys on nested regular none livewire components? Having a difficult time figuring out what the exact issue is.

I followed this tutorial for the infinite scroll. https://www.nicesnippets.com/blog/laravel-livewire-load-more-example

#2

What I think might be happening is that the code is firing the load-more event and that’s causing it to call a refresh but it could be that it’s being emitted twice pretty much simultaneously and on roundtrip, it’s having a hard time diffing the components because this particular code returns the whole model collection each time you scroll (as it’s triggering the load-more on scroll).

You can mitigate this a little bit by only calling the load-more when you need to. Or, you can use my method: Implement Load More Pagination

This only fetches the next set of models when you click on the load more button. You can change the trigger to happen when an element comes to page thus effectively infinite scroll. I have code of this somewhere and will follow up if you want. This code is a little more efficient as well as it’s only transferring what you need, when you need it.