Laravel 9安装wire-elements/modal后出现endif语法错误求助

问题描述 #

执行composer require wire-elements/modal后项目抛出语法错误：

syntax error, unexpected token "endif", expecting end of file

项目此前运行正常。

相关代码 #

Porto Livewire组件 #

<?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;
    }
}

视图文件（livewire.porto） #

<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>

表单视图（livewire.portofolio.create） #

<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>

      <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
      <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>

解决方案 #

1. 清除Blade视图缓存 #

安装新包后，旧的编译视图可能导致语法冲突，执行以下命令清除缓存：

php artisan view:clear

之后重启本地开发服务器（如Valet、Sail或Apache/Nginx）。

2. 检查版本兼容性 #

确认wire-elements/modal与你项目的Livewire版本匹配：

• 若使用Livewire 2.x，需安装modal包的2.x版本：

  composer require wire-elements/modal:^2.0
  

• 若使用Livewire 3.x，需安装modal包的3.x版本：

  composer require wire-elements/modal:^3.0
  

可通过composer show livewire/livewire查看当前Livewire版本。

3. 改用wire-elements/modal官方用法（可选） #

既然安装了该包，建议使用其原生模态框功能替代手动实现，避免潜在冲突：

修改Porto组件

public function openModal()
{
    $this->openModal('livewire.portofolio.create');
}

修改create视图为官方模态框结构

<x-modal.dialog wire:model="show">
    <x-slot name="title">Create New Portofolio</x-slot>

    <x-slot name="content">
        <form wire:submit.prevent="save">
            <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" 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>
    </x-slot>

    <x-slot name="footer">
        <button type="button" wire:click="closeModal" class="inline-flex justify-center 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>
        <button type="button" wire:click="save" class="inline-flex justify-center rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5 ml-3">
            Save
        </button>
    </x-slot>
</x-modal.dialog>

在create组件中添加必要属性和方法

// livewire/portofolio/create.php
public $show = false;
public $title, $description, $image;

public function save()
{
    // 处理保存逻辑
    $this->closeModal();
}

public function closeModal()
{
    $this->show = false;
    $this->reset(['title', 'description', 'image']);
}

内容的提问来源于stack exchange，提问作者Muhammad Gunawan