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
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.
@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?
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community