Uncaught Snapshot missing on Livewire component with id: QAcNIGM0wsdXZxTaZYW7

Hello, I have a widget on the dashboard panel and I run into this error:

livewire.js?id=07f22875:4496 Uncaught Snapshot missing on Livewire component with id: 46aAsyAJRQmsahOifnDD

livewire.js?id=07f22875:4496 Uncaught Snapshot missing on Livewire component with id: 46aAsyAJRQmsahOifnDD

I have logged a few lines in livewire.js

  var Component = class {
    constructor(el) {
      if (el.__livewire)
        throw "Component already initialized";
      el.__livewire = this;
      this.el = el;
      this.id = el.getAttribute("wire:id");
      this.__livewireId = this.id;

        // Log the component ID and element
        console.log('Initializing component with ID:', this.id);
        console.log('Element:', this.el);

      this.snapshotEncoded = el.getAttribute("wire:snapshot");
      this.snapshot = JSON.parse(this.snapshotEncoded);
      if (!this.snapshot) {
        throw `Snapshot missing on Livewire component with id: ` + this.id;
      }

  var Component = class {
    constructor(el) {
      if (el.__livewire)
        throw "Component already initialized";
      el.__livewire = this;
      this.el = el;
      this.id = el.getAttribute("wire:id");
      this.__livewireId = this.id;

        // Log the component ID and element
        console.log('Initializing component with ID:', this.id);
        console.log('Element:', this.el);

      this.snapshotEncoded = el.getAttribute("wire:snapshot");
      this.snapshot = JSON.parse(this.snapshotEncoded);
      if (!this.snapshot) {
        throw `Snapshot missing on Livewire component with id: ` + this.id;
      }

This gives me the following output:

Initializing component with ID: RrX3NJt5ITldClnRMXfS
livewire.js?id=07f22875:4491 Element: <div wire:snapshot="{"data":{"isFilamentNotificationsComponent":true,"notifications":[[],{"class":"Filament\\Notifications\\Collection","s":"wrbl"}]},"memo":{"id":"RrX3NJt5ITldClnRMXfS","name":"filament.livewire.notifications","path":"admin","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"490cc37887409efc358c5334492120673db2dd7f97d9bca91b0c9dd3fed92a5c"}" wire:effects="{"listeners":["notificationsSent","notificationSent","notificationClosed"]}" wire:id="RrX3NJt5ITldClnRMXfS">…</div>
livewire.js?id=07f22875:4490 Initializing component with ID: QAcNIGM0wsdXZxTaZYW7
livewire.js?id=07f22875:4491 Element: <div wire:id="QAcNIGM0wsdXZxTaZYW7" wire:poll.5s class="fi-wi-stats-overview-stats-ctn grid gap-6 md:grid-cols-3">…</div>grid

Initializing component with ID: RrX3NJt5ITldClnRMXfS
livewire.js?id=07f22875:4491 Element: <div wire:snapshot="{"data":{"isFilamentNotificationsComponent":true,"notifications":[[],{"class":"Filament\\Notifications\\Collection","s":"wrbl"}]},"memo":{"id":"RrX3NJt5ITldClnRMXfS","name":"filament.livewire.notifications","path":"admin","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"490cc37887409efc358c5334492120673db2dd7f97d9bca91b0c9dd3fed92a5c"}" wire:effects="{"listeners":["notificationsSent","notificationSent","notificationClosed"]}" wire:id="RrX3NJt5ITldClnRMXfS">…</div>
livewire.js?id=07f22875:4490 Initializing component with ID: QAcNIGM0wsdXZxTaZYW7
livewire.js?id=07f22875:4491 Element: <div wire:id="QAcNIGM0wsdXZxTaZYW7" wire:poll.5s class="fi-wi-stats-overview-stats-ctn grid gap-6 md:grid-cols-3">…</div>grid

I am not sure how to solve this. I would like to welcome some suggestions. Thanks

51 Replies

JJSanders•5mo ago

As far as I understand Livewire a little bit each livewire component needs to have a snapshot and now this piece of code seems to be missing the snapshot. Is this correct and how can I solve this? I am using just a simple widget:

class NewestProducts extends BaseWidget
{
    use InteractsWithPageFilters;

    protected function getStats(): array
    {
        $startDate = $this->filters['startDate'] ?? null;
        $endDate = $this->filters['endDate'] ?? null;

        return [
            StatsOverviewWidget\Stat::make(
                label: 'Total searches',
                value: Search::query()
                    ->when($startDate, fn (Builder $query) => $query->whereDate('created_at', '>=', $startDate))
                    ->when($endDate, fn (Builder $query) => $query->whereDate('created_at', '<=', $endDate))
                    ->count(),
            ),
        ];
    }
}

class NewestProducts extends BaseWidget
{
    use InteractsWithPageFilters;

    protected function getStats(): array
    {
        $startDate = $this->filters['startDate'] ?? null;
        $endDate = $this->filters['endDate'] ?? null;

        return [
            StatsOverviewWidget\Stat::make(
                label: 'Total searches',
                value: Search::query()
                    ->when($startDate, fn (Builder $query) => $query->whereDate('created_at', '>=', $startDate))
                    ->when($endDate, fn (Builder $query) => $query->whereDate('created_at', '<=', $endDate))
                    ->count(),
            ),
        ];
    }
}

Tally•5mo ago

Just to be clear... if you hardcode the values in the Stat::make and uncomment the filter stuff it works normally?

JJSanders•5mo ago

Excelent question. I added some static data like the documentation:

Stat::make('Unique views', '192.1k')
            ->description('32k increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),
        Stat::make('Bounce rate', '21%')
            ->description('7% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-down')
            ->color('danger'),
        Stat::make('Average time on page', '3:12')
            ->description('3% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),

Stat::make('Unique views', '192.1k')
            ->description('32k increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),
        Stat::make('Bounce rate', '21%')
            ->description('7% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-down')
            ->color('danger'),
        Stat::make('Average time on page', '3:12')
            ->description('3% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),

But then I have the same error

Tally•5mo ago

hmmm And without the widget everything runs smoothly?

JJSanders•5mo ago

Yes then I don't have this error

Tally•5mo ago

are you using the latest filament version?

JJSanders•5mo ago

Yes

Tally•5mo ago

do you have more widgets in your dashboard?

JJSanders•5mo ago

No just this one. And the only thing i did is add this class to App/Filament/Widgets And then it picked up the widget automatically

Tally•5mo ago

yes because of the discoverWidgets in the PanelProvider

JJSanders•5mo ago

Right

Tally•5mo ago

this is weird... I think if you made a new fresh project it wouldn't be a problem something else is causing this

JJSanders•5mo ago

Could be because I have it in more places. This is a project which I transferred over from Nova

Tally•5mo ago

where are you reusing it in your project?

JJSanders•5mo ago

reusing what?

Tally•5mo ago

ow sorry you said you had it in more places

JJSanders•5mo ago

Yeah in resources I have tried Removing filament and installing it again but that didn't work.

Tally•5mo ago

and if you create a brand new widget with only this in it

protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k'),
        ];
    }

protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k'),
        ];
    }

then you can figure out if it's that specific widget

JJSanders•5mo ago

Then I get the same error

awcodes•5mo ago

What is BaseWidget?

JJSanders•5mo ago

use Filament\Widgets\StatsOverviewWidget as BaseWidget;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;

awcodes•5mo ago

Hmm. Should be ok then.

JJSanders•5mo ago

Yes so I have no clue on what's going on...

awcodes•5mo ago

this is working fine for me:

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k')
                ->description('32k increase')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('success'),
            Stat::make('Bounce rate', '21%')
                ->description('7% increase')
                ->descriptionIcon('heroicon-m-arrow-trending-down')
                ->color('danger'),
            Stat::make('Average time on page', '3:12')
                ->description('3% increase')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('success'),
        ];
    }
}

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k')
                ->description('32k increase')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('success'),
            Stat::make('Bounce rate', '21%')
                ->description('7% increase')
                ->descriptionIcon('heroicon-m-arrow-trending-down')
                ->color('danger'),
            Stat::make('Average time on page', '3:12')
                ->description('3% increase')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('success'),
        ];
    }
}

awcodes•5mo ago

what version of livewire and filament are installed

JJSanders•5mo ago

I use filament: 3.2.83 Livewire 3.5.0

awcodes•5mo ago

it's got to be that other widget then. the filters

JJSanders•5mo ago

Was hoping you were right:

awcodes•5mo ago

honestly, not sure then, sorry. it's something specific to your app though. i'm not seeing that error. does it only show when you are using the widget.

JJSanders•5mo ago

No I have seen it on more pages that's why I find it soo weird. It must be something wrong with the installation but not sure what... * I have republished the assets * Removed the vendor directory and did a composer install what is there to do else

awcodes•5mo ago

it could be coming from a plugin too.

JJSanders•5mo ago

no plugins installed

awcodes•5mo ago

something is adding a livewire component that probably needs a wire:key. just have no clue what it could be. inspect the html and find that livewire id on the page, that might help to track it down

LeandroFerreira•5mo ago

Did you try it disabling database notifications in your panel?

JJSanders•5mo ago

I removed ->databaseNotifications(); from the config file but the message is still there

LeandroFerreira•5mo ago

did you try the stats in a fresh filament install?

JJSanders•5mo ago

No not yet. But the're are more problems on other resources. For Example I have resources with Relationmanagers there I get the same type of error. Maybe I sould create a fresh filament installation and port everything over. Unless there is an easier way to sort of reset everything

LeandroFerreira•5mo ago

try to create a fresh install..

JJSanders•5mo ago

@Leandro Ferreira @awcodes just had time to check it on a fresh install and in a fresh install it all works smoth

LeandroFerreira•5mo ago

This is why Filament requires a minimal repository to reproduce the issue before opening an issue on GitHub.

awcodes•5mo ago

Are you loading app.js into your filament panel?

JJSanders•5mo ago

Nope

LeandroFerreira•5mo ago

some extra configs, providers, plugins ?

JJSanders•5mo ago

I have removed the filament configs. And As far as I can see no extra configs... It is sooo sooo weird

awcodes•5mo ago

are you manually initializing Alpine anywhere? or using a custom layout?

JJSanders•5mo ago

@awcodes not initializing Alpine. And no Custom Layout.

JustLacksZazz•2mo ago

We're having the same issue right now and seems like we have a similar setup. Brand new widget on our dashboard page. Livewire doesn't seem to want to work at all. Any updates or fixes on your end @JJSanders? Livewire 3.5.6 Filament 3.2.111 Attn: @Gavrisimo

KingStalker•2mo ago

what is your APP URL ?

JustLacksZazz•2mo ago

We're using laravel herd so it's set to https://admin.test

KingStalker•2mo ago

i guess at this point its best to make a repository to reproduce the same error so we can debug it

JustLacksZazz•2mo ago

@Gavrisimo was able to find the issue. It was the laravel-blade-comments package: https://github.com/spatie/laravel-blade-comments/issues/6 Posting in case it helps anyone else 👍

Gaming

Programming

Uncaught Snapshot missing on Livewire component with id: QAcNIGM0wsdXZxTaZYW7