Blade custom components get opening tag not terminated

[BoGnY]

Custom components get opening "tag not terminated error" even when closed correctly.

Template

<x-dashboard-card cursor="cursor-pointer" wire:click="redirectRoute('asset.index')">
    <x-slot name="title">
        <div class="px-4 py-2.5 flex justify-center items-center bg-indigo-400 dark:bg-pg-primary-700 rounded-t-md border-b border-pg-primary-200 dark:border-pg-primary-600">
            <h3 class="text-base font-semibold uppercase text-white">{{ trans('dashboard.asset.title') }}</h3>
        </div>
    </x-slot>

    <div class="flex justify-between items-center h-auto px-4">
        <div>
            <span @class([
                'text-red-500 font-semibold' => !$assets_completed,
            ])>
                {{ $assets_completed ? trans('dashboard.asset.completed') : trans('dashboard.asset.uncompleted') }}
            </span>
        </div>
        <div>
            <span @class([
                'size-8 mt-2' => true,
                'icon-[mdi--close-circle] text-red-500 font-semibold' => !$assets_completed,
                'icon-[mdi--check-circle] text-green-400' => $assets_completed,
            ]) />
        </div>
    </div>
</x-dashboard-card>

<x-dashboard-card cursor="cursor-pointer" wire:click="redirectRoute('alert.index')" @class([
    '!h-[23rem] !min-h-[23rem]' => true,
    '!mb-8' => $balance_count > 0,
    '!mb-7' => $balance_count === 0,
])>
    <x-slot name="title">
        <div class="px-4 py-2.5 flex justify-center items-center bg-indigo-400 dark:bg-pg-primary-700 rounded-t-md border-b border-pg-primary-200 dark:border-pg-primary-600">
            <h3 class="text-base font-semibold uppercase text-white">{{ trans('dashboard.alert.title') }}</h3>
        </div>
    </x-slot>

    <div @class([
        'px-4 pb-1 flex flex-col gap-2 justify-center min-h-80' => true,
        'h-80' => $balance_count === 0,
    ])>
        @if($balance_count > 0)
            @foreach(reset($alert_array_current) as $alert_type => $value)
                <div class="flex justify-between items-center">
                    <div>
                        <span>
                            {{ $value['good'] ? trans("dashboard.alert.{$alert_type}.good") : trans("dashboard.alert.{$alert_type}.not_good") }}
                        </span>
                    </div>
                    <div>
                        <span @class([
                            'size-8 mt-2' => true,
                            'icon-[mdi--scale-unbalanced] text-red-500 font-semibold' => !$value['good'],
                            'icon-[mdi--scale-balance] text-green-400' => $value['good'],
                        ]) />
                    </div>
                </div>
            @endforeach
        @else
            <div @class([
                'mt-2' => $balance_count === 0,
                'mt-5' => $balance_count > 0,
            ])>
                <span class="text-red-500 font-semibold">
                    {{ trans('dashboard.balance.balance_no') }}
                </span>
            </div>
        @endif
    </div>
</x-dashboard-card>

Log output

$ yarn prettier resources/views/livewire/dashboard.blade.php --write
resources/views/livewire/dashboard.blade.php
[error] resources/views/livewire/dashboard.blade.php: SyntaxError: Opening tag "x-dashboard-card" not terminated. (35:13)
[error]   33 |             </x-dashboard-card>
[error]   34 |
[error] > 35 |             <x-dashboard-card cursor="cursor-pointer" wire:click="redirectRoute('alert.index')" BUM8JP1B ([ '!h-[23rem] !min-h-[23rem]' => true, '!mb-8' => $balance_count > 0,
[error]      |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[error]   36 |                 '!mb-7' => $balance_count === 0,
[error]   37 |             ])>
[error]   38 |                 <x-slot name="title" >
[error]   33 |                             'icon-[mdi--check-circle] text-green-400' => $assets_completed,
[error]   34 |                         ]) />
[error] > 35 |                     </div>
[error]      |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[error]   36 |                 </div>
[error]   37 |             </x-dashboard-card>
[error]   38 |

Process finished with exit code 2

[JohnathonKoster]

Very interesting. Thanks for providing the template snippet!