Livewire mount suddenly stop receiving parameters

I have a livewire component that shows a model through route model binding, it was working but suddenly I received the following error:

Too few arguments to function Livewire\LivewireManager::mount(), 0 passed in

Here are samples from my code:

Routes on web.php

Route::middleware(['auth:sanctum', 'verified'])->group(function() {
	Route::get('/admin/intro-section', \App\Http\Livewire\Admin\AdminIntroSection::class)->name('admin.intro-section.index');
	Route::get('/admin/intro-section/{id}', \App\Http\Livewire\Admin\AdminIntroSectionShow::class)->name('admin.intro-section.show');
});

Livewire component class in Livewire\Admin\

<?php

namespace App\Http\Livewire\Admin;

use Livewire\Component;
use App\Models\IntroSection;
use Illuminate\Support\Collection;
use Livewire\WithFileUploads;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class AdminIntroSectionShow extends Component
{
	use WithFileUploads;

	public IntroSection $introSection;
	public $photo;

	protected $rules = [
		'introSection.title' => 'string',
		'introSection.description' => 'string',
		'introSection.link' => 'string',
		'introSection.img_link' => 'string',
		'photo' => 'nullable|image|max:2000',
	];

	public function update(IntroSection $introSection, Request $request)
	{
		$this->validate();
		if ($this->photo) {
			$filename = $this->photo->store('img', 'public');
			$this->introSection->img_link = $filename;
		}
		$this->introSection->save();
	}

	public function mount($id)
	{
		$this->introSection = IntroSection::where('id', $id)->with(['details'])->first();
	}

    public function render()
    {
        return view('livewire.admin.intro-section-show');
    }
}

Steps to reproduce

  1. Add routes on web.php

  2. php artisan make:livewire Admin\AdminIntroSectionShow

  3. A model named “IntroSection” with the following attributes:

    ‘title’ => (string),
    ‘description’ => (text),
    ‘link’ => (string),
    img_link’ => (string)

Are you using the latest version of Livewire: Yes

The last time the code worked was before when I finished doing the file upload portion. After that, I tested the file upload which worked. Reloaded the page after being satisfied but now, mount seems not to like it.

Any ideas on how to fix this? I tried removing the update function, passing IntroSection $introsection to mount instead of $id. Nothing seems trivial on the livewire component as far as I’m concerned but here it is anyways:

<div>
	<x-slot name="header">
	    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
	        {{ __('Intro Section') }}
	    </h2>
	</x-slot>
	<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
		<section class="relative container mx-auto px-4">
			<div class="p-4 bg-white shadow-md rounded-lg">
				<form wire:submit.prevent="update" class="md:grid md:grid-cols-2 md:gap-6">
				<div class="md:col-span-1">
					<div class="mb-4">
						<label class="border-b-2 border-blue-500">Title</label>
						<div class="text-lg font-medium mt-2">{{ $introSection->title }}</div>
						<input type="text" name="title" wire:model="introSection.title">
						@error('title') {{ $message }} @enderror
					</div>
					<div class="mb-4">
						<label class="border-b-2 border-blue-500">Link</label>
						<div class="text-lg font-medium mt-2">{{ $introSection->link }}</div>
						<input type="text" name="link" wire:model="introSection.link">
						@error('link') {{ $message }} @enderror
					</div>
					<div class="mb-4">
						<label class="border-b-2 border-blue-500">Image</label>
						@if ($introSection->img_link)
							<img src="{{ asset($introSection->img_link) }}" class="h-24 block mt-2">
						@endif
						@if ($photo)
							<img src="{{ $photo->temporaryUrl() }}" class="block mt-2">
						@endif
						<div
							x-data="{ progress: 0, uploading: false }"
							@livewire-upload-start="uploading = true"
							@livewire-upload-finish="uploading = false"
							@livewire-upload-error="uploading = false"
							@livewire-upload-progress="progress = $event.detail.progress">
							<input type="file" name="img_link" wire:model="photo" class="block mt-2">
							<progress max="100" x-bind:value="progress" x-show="uploading"></progress>
						</div>

						@error('photo')
							{{ $message }}
						@enderror
					</div>
				</div>
				<div class="md:col-span-1">
					<div class="mb-4">
						<label class="border-b-2 border-blue-500">Description</label>
						<div class="text-lg font-medium mt-2">{{ $introSection->description }}</div>
						<textarea rows="5" cols="50" name="description" wire:model="introSection.description"></textarea>
						@error('description') {{ $message }} @enderror
					</div>
				</div>
				<div class="md:col-span-1">
					<button class="px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">Save</button>
				</div>
				</form>
			</div>
		</section>
	</div>
</div>

Reverted all my changes up to before I added the progress bar. The culprit seems to be the following block of code which I copied from Livewire Added File Upload Support:

<div
	x-data="{ progress: 0, uploading: false }"
	@livewire-upload-start="uploading = true"
	@livewire-upload-finish="uploading = false"
	@livewire-upload-error="uploading = false"
	@livewire-upload-progress="progress = $event.detail.progress">
	<input type="file" name="img_link" wire:model="photo" class="block mt-2">
	<progress max="100" x-bind:value="progress" x-show="uploading"></progress>
</div>

I was using Alpinejs but using @livewire directives at the same time which causes the error.

Updated code now which I got from https://laravel-livewire.com/docs/2.x/file-uploads#js-hooks:

<div
	x-data="{ isUploading: false, progress: 0 }"
    x-on:livewire-upload-start="isUploading = true"
    x-on:livewire-upload-finish="isUploading = false"
    x-on:livewire-upload-error="isUploading = false"
    x-on:livewire-upload-progress="progress = $event.detail.progress"
						>
	<input type="file" name="img_link" wire:model="photo" class="block mt-2">
	<div x-show="isUploading">
		<progress max="100" x-bind:value="progress"></progress>
	</div>
</div>