Level 104
Are you doing anything to push the Livewire scripts into the scripts stack?
Mar 23, 2022
14
Level 4
Livewire loading twice
Can someone explain in plain English on a fresh install of Laravel 9 , using Livewire I get the Livewire is loading twice error, this is driving me nuts!!!
App Template...
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="application-name" content="{{ config('app.name') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<!-- Styles -->
<style>[x-cloak] { display: none !important; }</style>
@livewireStyles
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>
@stack('scripts')
</head>
<body class="antialiased">
{{ $slot }}
<!-- Scripts -->
@livewireScripts
</body>
</html>
Blade Template.
<x-app-layout>
<livewire:partners::partners-list />
</x-app-layout>
Error
<!-- Livewire Component wire-end:C21u23gSvBwjgOtqHNcL -->
<!-- Scripts -->
<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=940557fc56b15ccb9a2d" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
<script data-turbo-eval="false" data-turbolinks-eval="false" >
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
window.Livewire = window.livewire;
window.livewire_app_url = '';
window.livewire_token = 'VYKX4t64nxsEoDIGTA0dRwyMNN1l0GZkizjcea71';
/* Make sure Livewire loads first. */
if (window.Alpine) {
/* Defer showing the warning so it doesn't get buried under downstream errors. */
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function() {
console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\n\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
})
});
}
/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
window.addEventListener('livewire:load', function () {
callback();
});
};
let started = false;
window.addEventListener('alpine:initializing', function () {
if (! started) {
window.livewire.start();
started = true;
}
});
document.addEventListener("DOMContentLoaded", function () {
if (! started) {
window.livewire.start();
started = true;
}
});
</script>
```
Level 4
@tykus nope should i be?
Level 104
@MalBe no.
Do you require it into your Javascript - e.g. to register listeners?
Level 4
@tykus nope all I'm trying to do is create a basic list using livewire, for some reason, it's telling me it's loaded twice, I can't see how it is loaded twice as it is a fresh install and I haven't altered anything, from what has come out of the box..
Level 104
@MalBe definitely strange.
So sanity check; if you remove each of these lines incrementally and individually, does it change/remove the error message?
<script src="{{ mix('js/app.js') }}" defer></script>
@stack('scripts')
@livewireScripts
Level 4
@tykus
remove app.js No change, remove @stack no change, remove @livewireScripts error gone, page loads, but livewire doesn't work
Level 104
@MalBe 🤷♂️
Which error message are you actually getting?
Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.
or
Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\n\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js
Level 4
@tykus both
Level 104
@MalBe What does the component's code look like?]; you're not using the <x-app-layout> component in there as well?
Level 4
<?php
namespace Modules\Partners\Http\Livewire;
use Livewire\Component;
use Modules\Partners\Entities\Partner;
class PartnersList extends Component
{
public $search;
public $location;
public $perPage = 32;
public function loadMore()
{
$this->perPage += 32;
}
public function render()
{
$partners = Partner::where('status', 1)->whereLike('partner_type_id', $this->search ?? '')
->when($this->location, function ($query, $location){
return $query->where('town', $location);
})
->paginate($this->perPage);
return view('partners::livewire.partners-list', [
'partners' => $partners
]);
}
}
<div>
<div class="grid grid-cols-1 gap-6 mt-10 sm:grid-cols-2 xl:grid-cols-4">
@foreach ($partners as $partner)
<div class="h-full max-w-full mx-auto transition-all duration-200 transform bg-white border border-gray-300 rounded-md shadow-sm cursor-pointer hover:border-gray-400 ease hover:-translate-y-1 w-72">
<div class="w-full h-42">
<img src="{{ asset('storage') }}/{{ $partner->logo_path }}" class="object-cover w-full h-full" />
</div>
<div class="p-4">
<div class="text-sm ">
<h3 class="text-base font-bold text-tfn-blue-500">{{ $partner->partner_name }}</h3>
<p class="text-gray-500">{{ $partner->town }}, {{ $partner->county }}, {{ $partner->postcode }}</p>
<div class="p-3">
<a href="/partners/{{ $partner->slug }}" class="p-2 font-semibold text-center text-white rounded-md bg-tfn-blue-500">View Partner</a>
</div>
</div>
</div>
</div>
@endforeach
<div x-data="{
observe () {
let observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@this.call('loadMore')
}
})
}, {
root: null
})
observer.observe(this.$el)
}
}" x-init="observe" x-transition.delay.10ms>
</div>
</div>
</div>
Please or to participate in this conversation.