livewire: Cannot read property 'fingerprint' of null

@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 😃

_Originally posted by @jasontxf in https://github.com/livewire/livewire/issues/1686#issuecomment-698503788_

Hello @calebporzio I’m sorry to reopen this, but the original issue wasn’t resolved. Is the intended behavior to always generate a different key (by appending time()) when using nested component?

Thank you for your time!

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 8
Comments: 21

Commits related to this issue

only initialize child components when necessary - closes #1726 — committed to austenc/livewire by austenc 4 years ago
only initialize child components when necessary - closes #1726 — committed to austenc/livewire by austenc 4 years ago

Most upvoted comments

Im getting this error when sending an event from child to parent container. I am using wire:key as described but get the error Cannot read property 'fingerprint' of null.

Container

class Container extends Component
{
    public $listeners = [
        'submit'
    ];

    public function render()
    {
        return view('livewire.container');
    }

    public function submit()
    {
        //dd("The child says wow - it works!");
    }
}

with view

<div>
    <h1>Im the container</h1>
    @foreach([1,2,3] as $nbr)
        @livewire('child', compact('nbr'))
    @endforeach
</div>

Child

class Child extends Component
{
    public $nbr;

    public function mount($nbr)
    {
        $this->nbr = $nbr;
    }

    public function render()
    {
        return view('livewire.child');
    }

    public function submit()
    {
        $this->emit('submit', 'wow!');
    }
}

with view

<div wire:key="{{ $nbr }}">
    Hey im a child
    <button wire:click="submit">submit</button>
</div>

Fixed

By passing key in directive. Using syntax @livewire('component', [], key($str)). Note key() here is not php key() but magic syntax provided by livewire 🚀

+22

ajthinking on Nov 10, 2020

This problem arrises because of the lack of a wire:key within the @foreach loop: @foreach <div wire:key="???"

Morphdom is tripping up because of the lack of it

calebporzio on Nov 9, 2020

Hello @calebporzio!

The main issue is that when a nested component is included in a component, when used together with wire:model that dynamically reload data from the component, I will receive index.js:31 Uncaught (in promise) TypeError: Cannot read property ‘fingerprint’ of null after a few searches.

Here are some snippets of my code

Files.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class Files extends Component
{
	use WithPagination;

        public $orderName = null;

	public function render()
	{
		if ($this->orderName !== null && $this->orderName !== '') {
			$files->where('shopify_order_name', 'LIKE', '%' . $this->orderName . '%');
		}
		
		$files = $files->paginate(5);
		
		return view('livewire.files', ['files' => $files,])->extends('layouts.app');
	}
}

files.blade.php


<input wire:model="orderName" type="text" />

<table>
  <thead><tr>...</tr></thead>
    <body>
      @foreach($files as $watchedFile)
          <tr>
            <td>
                <livewire:files-table-actions :watched-file="$watchedFile" :key="$watchedFile->id"/>
	    </td>
	</tr>
      @endforeach
      </tbody>
</table>

Now when I use wire:model to search for the first time, it will work. When I tried to search again with another keyword, this error will appear.

It’s definitely hard to explain the underlying issue so I’ve made a short video. https://www.dropbox.com/s/4fdnt1cuqi08ttt/livewire-bug.mov?dl=0

In my video, I noticed that when the issue occur, I will see this in the UI Screenshot 2020-10-01 at 2 21 27 PM

instead of this Screenshot 2020-10-01 at 2 30 39 PM

Notice the trash icon appeared twice (That is the nested component)

The <files-table-actions> component was generated twice. This leads me to believe perhaps the previously generated component wasn’t cleared for some reason and thus there’s no fingerprint on the DOM since it has already been parsed.

I’ve made another video to prove my point. https://www.dropbox.com/s/mn844z5kxbzusx8/livewire-proof.mov?dl=0

Knowing I was right, the workaround for this issue for me is to always generate a different key for nested component like this:

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

append time() to my :key

This is as far as I can troubleshoot as I have no idea how Livewire works under the hood. Sorry.

I hope I’ve managed to explain the issue clearly to you. Please let me know if it’s still unclear.

Thank you!

Context

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

jasontxf on Oct 1, 2020

For what it’s worth, I had this issue because I tried to do wire:key="$transaction->id" instead of wire:key="{{ $loop->index }}"

iambateman on Feb 26, 2022

Hello,

I am not using Vue JS (for the first time ever!) 😃

This problem arrises because of the lack of a wire:key within the @foreach loop: @foreach <div wire:key="???"

Morphdom is tripping up because of the lack of it

I don’t really understand what @calebporzio is saying considering in my examples I do have a wire:key in the foreach.

      @foreach($files as $watchedFile)
          <tr>
            <td>
                <livewire:files-table-actions :watched-file="$watchedFile" :key="$watchedFile->id"/>
	    </td>
	</tr>
      @endforeach

But in any case, my workaround using rand works well for me. So it’s no big deal 😃

Do open a new ticket if anyone still have issues so that Caleb don’t have to keep closing this issue haha.

Thanks!!

jasontxf on Nov 12, 2020

Here’s a repo to reproduce the issue for me.

It is abstracted from an app I am working so it might not be the most minimal reproduction, but the list.blade.php (blade component) file has a couple of failing examples and one that works. If you punch in a number 1-6 then clear the input it will trigger the issue, in the current state of the repo.

I’ve been fairly judicious with wire:key properties after reading the docs on nesting and troubleshooting in an attempt to rule that out.

evanbarter on Oct 8, 2020