After 12 hours of looking to my code, I found the issue. It was because I used #[Lazy] in my component. Because of that, it didn't load the script.
How can I use lazy but also use a script?
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi there. I've been breaking my head all night over this and I just couldn't make it work or find any information. I have a manage.blade.php that, where I import a few livewire components.
It's looking like this:
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
xxx
</h2>
</x-slot>
<div class="py-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex gap-8">
@include('nodes.sidebar')
<!-- Main Content Area -->
<div class="w-3/4 space-y-6">
<livewire:nodes.node-info-cards lazy />
<livewire:nodes.node-console lazy />
<livewire:nodes.node-network />
</div>
</div>
</x-app-layout>
<script>
console.log('Test');
</script>
node-network.blade.php
<div class="bg-white shadow rounded-lg p-6 mb-8">
<!-- Header for the Network Data Section -->
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">xxx</h3>
</div>
<div class="border-b pb-4 mb-4">
<p class="text-sm text-gray-500">xxx</p>
<div class="p-2 bg-gray-100 rounded-md mb-1 font-semibold">xxxx
</div>
<div class="mt-4">
<canvas id="networkChart"></canvas>
</div>
</div>
<script>
console.log('Test'); // This script is not loading anywhere. Script is never loading in this component.
</script>
In this component, the script does load. But when I try to add a script in, for example node-network, it's not loading the script or even showing in my code. Why is that?
Really hope someone can help me out.
Please or to participate in this conversation.