Error After Upgrade livewire
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
Please or to participate in this conversation.