Support the ongoing development of Laravel.io →
Alpine.js Laravel

My application works fine in local but when i uploaded to staging server it starts giving error

Uncaught Snapshot missing on Livewire component with id: guveubtGpNgsXwGzlySI Uncaught (in promise) Component not found: guveubtGpNgsXwGzlySI

This happens when i make changes or upload file.

this is the component code

<?php

namespace App\Http\Livewire\Admin\Article;

use App\Models\Affiliate; use App\Models\Article; use Livewire\Component; use Livewire\WithFileUploads; use Spatie\MediaLibrary\MediaCollections\Exceptions\FileDoesNotExist; use Spatie\MediaLibrary\MediaCollections\Exceptions\FileIsTooBig; use Spatie\MediaLibrary\MediaCollections\Models\Media;

class ArticleDetail extends Component { use WithFileUploads;

public Article $article;

public $articleStatus;

public $articleHasExcerpt = false;

public $showMediaModal = false;

public $mediaFile;

public $selectedMedia;

public $maxUploadSize = 100000; // 100MB

public $featuredImage;

public $featuredImageAlt = '';

public $editingFeaturedImage = false;

public $featuredImageBeingUpdated;

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


protected function rules()
{
    return [
        'article.title' => 'required',
        'article.content' => 'nullable',
        'article.excerpt' => 'nullable',
    ];
}

public function mount(): void
{

    $this->article->load('author', 'media', 'tags');

    $this->articleStatus = $this->article->published ? 'published' : 'hidden';

    $this->articleHasExcerpt = $this->article->excerpt !== null;
}

public function updatedArticleStatus($value): void
{
    if ($value === 'published') {
        $this->article->published_at = now();
    } else {
        $this->article->published_at = null;
    }
}

public function editFeaturedImage(): void
{
    $this->featuredImageBeingUpdated = $this->article->getFirstMedia('cover');

    $this->featuredImageAlt = $this->featuredImageBeingUpdated->getCustomProperty('alt');

    $this->editingFeaturedImage = true;
}

public function updateFeaturedImage(): void
{
    $this->featuredImageBeingUpdated->setCustomProperty('alt', $this->featuredImageAlt);

    $this->featuredImageBeingUpdated->save();

    $this->editingFeaturedImage = false;

    $this->notify('Featured image updated!');
}

public function removeFeaturedImage(): void
{
    $this->article->clearMediaCollection('cover');
}

public function save(): void
{
    $this->validate();

    $this->article->reading_time = $this->readingTime($this->article->content);
    $this->article->content = $this->parseAffiliateLinks($this->article->content);
   $this->article->save();
    if ($this->featuredImage) {
        $this->article->addMedia($this->featuredImage->getRealPath())
            ->usingName(pathinfo($this->featuredImage->getClientOriginalName(), PATHINFO_FILENAME))
            ->usingFileName($this->featuredImage->getClientOriginalName())
            ->toMediaCollection('cover');
    }

    $this->featuredImage = null;

    $this->dispatch('refresh')->self();

    $this->notify('Article saved!');
}

public function removeBlogPost(): void
{
    $this->article->delete();

    $this->redirect(route('admin.articles.list'));
}

/**
 * @throws FileDoesNotExist
 * @throws FileIsTooBig
 */
public function updatedMediaFile(): void
{
    $mimeType = $this->mediaFile->getMimeType();

    if (str_contains($mimeType, 'image')) {
        $this->validate([
            'mediaFile' => 'required|image|max:' . $this->maxUploadSize,
        ]);
    } elseif (str_contains($mimeType, 'video')) {
        $this->validate([
            'mediaFile' => 'required|mimetypes:video/mp4,video/quicktime|max:' . $this->maxUploadSize,
        ]);
    } else {
        $this->reset('mediaFile');

        $this->addError('mediaFile', 'Invalid file type. Please upload an image or video file.');

        return;
    }

    $this->uploadMedia();
}

/**
 * @throws FileDoesNotExist
 * @throws FileIsTooBig
 */
public function uploadMedia(): void
{
    $this->article
        ->addMedia($this->mediaFile->getRealPath())
        ->usingName(pathinfo($this->mediaFile->getClientOriginalName(), PATHINFO_FILENAME))
        ->usingFileName($this->mediaFile->getClientOriginalName())
        ->toMediaCollection('media');

    $this->article->load('media');

    $this->reset('mediaFile');
}

public function insertMedia(Media $media): void
{
    $this->dispatch('tiptap-insert-media', [
        'type' => $media->mime_type,
        'url' => '/storage/' . $media->getPathRelativeToRoot(),
        'alt' => $media->name,
    ]);

    $this->showMediaModal = false;
}

public function deleteMedia(Media $media): void
{
    $media->delete();

    $this->article->load('media');
}
public function readingTime($content): string
{
    $wordCount = str_word_count(strip_tags($content));

    $readingTimeInMinutes = ceil($wordCount / 200);

    return $readingTimeInMinutes . ' min read';
}
protected function parseAffiliateLinks($content)
{

    return preg_replace_callback(
        '/@affiliate\s*\[\s*(\d+)\s*,\s*\'(.*?)\'\s*\]/',
        function ($matches) {
            $affiliate = Affiliate::find($matches[1]);
            if ($affiliate) {
                return '<a href="/go/'.$affiliate->slug.'" target="_blank" rel="sponsor">'.$matches[2].'</a>';
            }
            // If affiliate not found, return the original text
            return $matches[0];
        },
        $content
    );
}



public function getMediaProperty()
{
    return $this->article->media;
}

public function render()
{
    return view('livewire.admin.article.article-detail')->layout('layouts.admin');
}

}

what could be the reason for this issue

Last updated by @anikett 1 year ago.

rtaylor82 liked this thread

1

The problem can probably be seen in the blade not in the LiveWire Model. In most cases this error tells you you did not wire:key all necessary places.

Each <livewire:xxx Give it a unique wire:key="UNIQUE_SOMETHING"

Each foreach loop inside a livewire blade file that contains livewire structures... first element, like a div. Give it a wire:key="UNIQUE_SOMETHING"

If you do that you very likely get rid of this problem. I ran into that issue (foreach case) when updating to livewire 3 a lot.

Last updated by @ojsoft 1 year ago.
0

@anikett I have the same issue where it works fine on my dev environments but when pushed to the server I get the "Uncaught Snapshot missing on Livewire component with id: R1rsgkBVrClAl8P8eYzL" error.

I have assigned wire:key to each livewire component and not using any loops.

Did you figure it out?

0

Sign in to participate in this thread!

Eventy

Your banner here too?

Aniket Singh anikett Joined 11 Jul 2022

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.