Cannot read property 'fingerprint' of null with nested Livewire component inside Blade component

#1

What seems to be the problem:
I have a Livewire component that contains multiple instances of a blade component, each of which contains another Livewire component. Every Livewire component has a unique wire:key defined. It is causing “Cannot read property ‘fingerprint’ of null” when clicking on one of the items, under the text input.

I was unable to create a Laravel Playground example that included Livewire and Blade components (tips on that would be appreciated). However, because of that I had to refactor the code a little in Laravel Playground to not use a Blade component at all. When I did the code works without the error.

To summarise, using the Blade component it fails, with the code copied from the Blade component and repeated for each item, it works. Also, if I include only one of the x-item elements, it also works.

In the playground, I have included the code for the item Blade component and the code (commented out) to include it in the top-wire component.

Steps to Reproduce:
Use the code from the Playground. In top-wire.blade.php, comment out (or remove) the two div elements at the same level as and immediately above the commented out x-item elements and uncomment those two items.

Are you using the latest version of Livewire:
I am using version 2.4.3

Do you have any screenshots or code examples:
Code in Laravel Playground example

EDIT: I have added three replies with the generated code obtained from debugging:

  1. The code that works (i.e. without the Blade component).
  2. The code that fails (i.e. with the Blade component).
  3. The generated content for each Blade component.
#5

I realised that my previous edit and replies were not helpful because I had not include the html generated from the mount of the nested wire components. I have just run that and the results of the two approaches are almost identical. Obviously ids and checksums differ. The only other differences are outside of the nested wire components and seem inconsequential because they are just places where the Blade component has already resolved php variables that are left as echo statements in the version that doesn’t use the Blade component. I have these saved if it would help to include them.
For some reason, I am unable to edit the OP to change the EDIT.

#6

I have resolved my actual problem (i.e. not the cut down example).

I am developing a filter for an index page of an Eloquent model. I had everything inside the Livewire filter component. I have now separated it, so that my filter inputs are in a Blade component, which includes other components, including Livewire components, to filter various fields. Each individual filter dispatches an event when its value changes. I have changed the Livewire filter component to simply listen to those events and change the respective variables that are all entangled. The Blade filter component now includes the Livewire filter component in parallel to the inputs, so no other Liverwire components are nested within the it.

#7

A further update. I was premature in saying that my problem was solved because I still had “Cannot read property ‘fingerprint’ of null” errors on some conditions. It has taken me some time to narrow this down because, whenever I created a cut down example in Laravel Playground, I did not get the error.

It seems my problem was caused by using the wrong case for a parameter in the <livewire:component> tag. I had carelessly copied a camel case property name from the component class and pasted it into the tag, forgetting to change it to snake case. Oddly, the component partially worked, with no errors reported about missing a value for this required parameter.

I cannot believe how much time I wasted on this careless mistake :roll_eyes:

1 Like