wired problem with blaze - component not working

my laravel 13 livewire 4 app component <x-sidebars.sidebar-admin /> not working in my lazyout file when use blaze ( mast put the code direct inside layout file to wroking ) if disabled blaze component works
note: always aim clear:view and clear:cache

FULL CODE IS BELOW

// app-blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ App::getLocale() === 'ar' ? 'rtl' : 'ltr' }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/images/favicon-16x16.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/images/favicon-32x32.png') }}">

    <meta name="robots" content="noindex, nofollow">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    @vite('resources/css/admin.css')
    @livewireStyles
    <title>@lang('app.dashboard') | {{ $title ?? ' Dashboard' }}</title>
</head>

<body class="bg-gray-100">

    <div class="bg-gray-100 grid  x-cloak grid-cols-[1fr]  lg:grid-cols-[250px_1fr] grid-rows-[60px_1fr] duration-300 ease-in-out"
        x-data="{ isCollapsed: false, isMobileSidebarOpen: true }" x-bind:class="{ 'lg:!grid-cols-[90px_1fr]  ': isCollapsed }">

        <!-- navbar start -->
        <!-- navbar end -->
        <!--         SIDEBAR ADMIN START -->
        <x-sidebars.sidebar-admin /> // this not working
        <!--         SIDEBAR ADMIN END -->
        <!-- content start -->
        <!-- content end -->
        <x-footers.footer-admin /> // this working without any problem
    </div>


    @livewireScripts
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('alert', (event) => {

            });
        });
    </script>

    @vite('resources/js/app.js')
    @stack('js')
</body>

</html>

AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Livewire\Blaze\Blaze;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void {}

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Blaze::optimize()->in(resource_path('views/components'));
    }
}

imranbru

1 week ago

Best Answer

Level 4

This is a classic gotcha with Blaze. Your footer-admin works fine because it's likely just static HTML, but your sidebar is tripping up the compiler.

Blaze is primarily designed as a drop-in replacement for anonymous, stateless components. Sidebars almost always break this rule in one of two ways:

Never pass your root views/components directory into Blaze. You only want to optimize "dumb", presentational UI components (buttons, badges, icons, cards, footers).

Update your AppServiceProvider to specifically target directories that don't rely on global state or backing classes:

public function boot(): void
{
    // Target specific UI folders instead of everything
    Blaze::optimize()
        ->in(resource_path('views/components/ui'))
        ->in(resource_path('views/components/icons'))
        ->in(resource_path('views/components/footers'));
}

Exclude complex structural components like navbars and sidebars from Blaze entirely and you'll be good to go.

Respect

1 week ago

Level 3

okey thanks for clear this for me , i will use blaze partially like you said in app service provider insted of all component thanks

Please or to participate in this conversation.