laravel 9 = syntax error, unexpected token "endif", expecting end of file after composer require wire-elements/modal - laravel-livewire

Question

I got syntax error, unexpected token "endif", expecting end of file after adding composer require wire-elements/modal before being added to the composer require wire-elements/modal app I made running
enter image description here
and my code to my porto
`
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Porto extends Component
{
public $isModal = false;
public function render()
{
return view('livewire.porto');
}
public function openModal()
{
$this->isModal = true;
}
public function closeModal()
{
$this->isModal = false;
}
}
`
my view
`
<hr>
<div class="container mx-auto portofolio-container pb-10">
<div class="title-container mb-4 flex justify-between">
<h1 class="title"> My Portofolio</h1>
<x-jet-button wire:click = "openModal()" class="justify-center">
Create Portofolio
</x-jet-button>
</div>
<hr class="break-line">
#if ($isModal)
#include('livewire.portofolio.create')
#endif
</div>
`
my portofolio form
`
<div class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
Create New Portofolio
</h3>
<form action="" class="mt-2">
<div class="mb-4">
<label for="title" class="block text-gray-700 text-sm font-bold mb-2">Portofolio Title</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight
focus:outline-none focus:shadow-outline" id="title" wire:model="title">
#error('title') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="desc" class="block text-gray-700 text-sm font-bold mb-2">Description</label>
<textarea wire:model="description" type="text" rows="5" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="desc"></textarea>
#error('description') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="image" class="block text-gray-700 text-sm font-bold mb-2">Image</label>
<input wire:model="image" type="file" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="image">
#error('image') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
</form>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Save
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</div>
</div>
</div>
</div>
`
I've tried searching but still can't find a solution

Answer 1

Livewire only supports a single root element. Remove the hr tag or move it inside your div. That will most likely solve your issue.