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

46 Replies

JJSanders•2mo 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•2mo ago

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

JJSanders•2mo 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•2mo ago

hmmm And without the widget everything runs smoothly?

JJSanders•2mo ago

Yes then I don't have this error

Tally•2mo ago

are you using the latest filament version?

JJSanders•2mo ago

Yes

Tally•2mo ago

do you have more widgets in your dashboard?

JJSanders•2mo 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•2mo ago

yes because of the discoverWidgets in the PanelProvider

JJSanders•2mo ago

Right

Tally•2mo 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•2mo ago

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

Tally•2mo ago

where are you reusing it in your project?

JJSanders•2mo ago

reusing what?

Tally•2mo ago

ow sorry you said you had it in more places

JJSanders•2mo ago

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

Tally•2mo 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•2mo ago

Then I get the same error

awcodes•2mo ago

What is BaseWidget?

JJSanders•2mo ago

use Filament\Widgets\StatsOverviewWidget as BaseWidget;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;

awcodes•2mo ago

Hmm. Should be ok then.

JJSanders•2mo ago

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

awcodes•2mo 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•2mo ago

what version of livewire and filament are installed

JJSanders•2mo ago

I use filament: 3.2.83 Livewire 3.5.0

awcodes•2mo ago

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

JJSanders•2mo ago

Was hoping you were right:

awcodes•2mo 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•2mo 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•2mo ago

it could be coming from a plugin too.

JJSanders•2mo ago

no plugins installed

awcodes•2mo 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•2mo ago

Did you try it disabling database notifications in your panel?

JJSanders•2mo ago

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

LeandroFerreira•2mo ago

did you try the stats in a fresh filament install?

JJSanders•2mo 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•2mo ago

try to create a fresh install..

JJSanders•2mo ago

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

LeandroFerreira•2mo ago

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

awcodes•2mo ago

Are you loading app.js into your filament panel?

JJSanders•2mo ago

Nope

LeandroFerreira•2mo ago

some extra configs, providers, plugins ?

JJSanders•2mo ago

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

awcodes•2mo ago

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

JJSanders•2mo ago

@awcodes not initializing Alpine. And no Custom Layout.

Gaming

Programming

Uncaught Snapshot missing on Livewire component with id: QAcNIGM0wsdXZxTaZYW7