Fingerprint issue even with empty components

#1

What seems to be the problem:

I have a Livewire component with a form and a child component included.
However i get this “Cannot read property ‘fingerprint’ of null error” when typing into a text box in the form. If i don’t include the child component, the JS error won’t occur.

However this does not make any sense to me. Even if i clear out the child component and only leave
an empty DIV in the blade file, i still have the error.

Both the parent component (containing the form and the included child component) have one root element. Hitting my head to the wall, these fingerprint errors seems to pup up everywhere, even with empty components or unique keys, etc.

Can someone just help me understand how this works and what i’m doing wrong?

Are you using the latest version of Livewire:

Livewire 2.3.17, Laravel 7.3

Do you have any screenshots or code examples:

Parent component:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            @include('news.form-create-news')
        </div>
        <div class="col-md-6">
            @livewire('news.listing', [], key('news-listing'))
        </div>
    </div>
</div>

Form:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="bg-white p-5 my-4 shadow">
                <form class="mt-4">
                    <div class="form-group">
                        <label for="">Title</label>
                        <input type="text" class="form-control" wire:model="title" placeholder="Title">
                    </div>

                    <div class="form-group">
                        <input type="hidden" wire:model="content" id="news_content">
                    </div>

                    <div wire:ignore id="news-article-content-editor" class="form-group">
                        <label >Content</label>
                        <div wire:ignore class="container" style="border:1px solid #e4e4e4">
                            <div id="editorjs"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Child component:

<div>
The child component
</div>
#2

please show the code for your component and child component

#3

Hello,

Thanks for the reply. So i solved that problem by rewriting the template.
I have now a very similar problem:

I have a Livewire component Listing which includes a child component ListingPost. Everything worked fine until i added a pagination, now i get the dreaded Javascript error when clicking a pagination link: “Uncaught (in promise) TypeError: Cannot read property ‘fingerprint’ of null”.

I simplified the components and templates and removed 90% of the code, just to make it easier to debug. The issue still occurs. It only goes away if i move the pagination outside the root div of in the Listing (obviously not a solution) or remove the included child component.

I don’t understand what is wrong. Please help!

Listing (parent component):

<?php

namespace App\Http\Livewire\News;

use App\Http\Livewire\News;
use App\NewsPost;
use Livewire\Component;
use Livewire\WithPagination;

class Listing extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    protected $listeners = ['refreshPosts' => '$refresh'];
    protected $posts;

    public function render()
    {

        $posts = NewsPost::where('user_id', 1)->paginate(1);

        return view('livewire.news.listing', [
            'posts' => $posts
        ]);
    }

}

Blade template:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="bg-white p-5 my-4 shadow">
                <div>
                    <div class="container mt-0 mb-0">
                        <div class="d-flex justify-content-center row">
                            <div class="col-md-12 p-0 m-0">
                                @livewire('news.listing-post', ['posts' => $posts], key('news-listing-post-{{ time()}}'))
                            </div>
                        </div>
                    </div>
                    <div>
                        {{ $posts->links() }}
                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

ListingPost (child):

<?php

namespace App\Http\Livewire\News;

use App\NewsPost;
use App\NewsPostTag;
use Livewire\Component;

class ListingPost extends Component
{
    public $post;
    public $deleted_at;
    public $deleteConfirm = 0;
    public $restored = false;

    public function render()
    {
        return view('livewire.news.listing-post');
    }
}

Blade template:

<div></div>
#4

Hey there. I never use before pagination like you trying to do with nested component, but first try like this. in Listing component make public a property $posts:

public $posts;
...

in render:

{
   $this->posts = NewsPost::all()->paginate();
   return view('livewire.news.listing');
}

and in blade component

<div class="container mt-0 mb-0">
                        <div class="d-flex justify-content-center row">
                            <div class="col-md-12 p-0 m-0">
                             @foreach($posts as $post)
                                @livewire('news.listing-post', ['post' => $post], key($post->id))
                             @endforeach
                            </div>
                        </div>
                    </div>...
                    {{ $posts->links() }}
....

let me know if the issue persist

#5

That won’t work because public property cannot be a collection:

Livewire component's [news.listing] public property [posts] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them.
#6

ok, change that for

{
   return view('livewire.news.listing', ['posts' => NewsPost::paginate(5)]);
}

and delete the public property $posts in parent component

#7

Thanks for the help. The pagination displays correctly as before but as soon as i click any of the pagination buttons it throws the Javascript fingerprint error and breaks the page.

Also i just noticed the same happens if i completely remove the pagination and just click the filter buttons in the parent component.

I just don’t get it why is so difficult and why documentation is not more clear about these dom diff issues. Seems like giving up this whole Livewire after losing days trying to figure out basic things on a very simple page.

#8

ok I understand your frustration…all pass through. Let me dev an example with your same logic but not using nested component…just one component

use WithPagination;
protected $paginationTheme = 'bootstrap';

public function render()
{
   return view('livewire.some-component', ['posts' => Model::paginate(1)]);
}

in blade

<div class="content">
   @foreach($posts as $post)
        {{$post->name}} --- {{$post->content}}
   @endforeach
</div>

can you test this simple code and let me know if throws the same error? I’m supposing name and content as properties of Model, you deploy yours

#9

Yes, it works this way. Seems like the nested component is the issue. I had the same problem few days before. Then i had one parent component with 2 children and kept getting the same “fingerprint” error. Eventually made 1 blade template with 2 Livewire components but no nested ones and that solved the issue.

Nested components would be a nice way to work because could update smaller sections of a component without reloading the whole big parent component. I just can’t seems to make them work consistently.

1 Like
#10

I think that the problem isn’t nested component, was the intention of use paginate through nested component and all model binding that Livewire give. Maybe you can probe this just changing ‘posts’ => Model::paginate() for ‘posts’ => Model::all() (forget $posts->links()) and bind it to nested component and will work as well too. First, paginator is a model instance of laravel with meta and link information quite different…I’m not an expert on this, maybe you have to make a research about it and see more about the use you tried to make of it.

#11

The problem seem to have been Vue.js which was conflicted with Livewire. I added Livewire Vue plugin which seem to have solved all the issues i had before with filters, pagination and nested components.

1 Like