anikett's avatar

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

0 likes
0 replies

Please or to participate in this conversation.