my guess is this is DOM issue. tag is missing somewhere.
Is it possible to remove AlpineJs from Livewire?
I'm having a very strange issue.. In my website, I have a dropdown menu on my navbar (which is inside my app layout, so it is included on every single page) that uses Alpine
On the home page for example, this dropdown works perfectly. But in some pages, specifically the ones that have a livewire component inside them, it doesn't work at all. I can see the dropdown visibility toggle animation being started for about 1/100th of a second but it disappears back instantly.
I'm also getting this error in the console when I try to toggle the dropdown on those pages:
Uncaught (in promise)
Object { isFromCancelledTransition: true }
I did some research and learnt that this error occurs when you try to initialize AlpineJs more than once. And my theory is; since these pages with livewire components are already utilizing Alpine, that causes Alpine to re-initialize. And I think I'm getting this error because I added the following lines to my app.js file to be able to use the dropdown from pages that don't have livewire components in them.
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();
Now I can either remove these lines from the app.js file and have the dropdown only work on pages with livewire components, or I can keep it and have it only work on pages without livewire components.
So, is there a way to stop livewire from bringing its own AlpineJs and have it use the one that is included from app.js file instead?
Or should I go crazy and include a livewire component on all my pages?
you can take control of when the livewire components are loaded, otherwise, as you have found, having alpine loaded twice breaks things.
https://livewire.laravel.com/docs/installation#manually-including-livewires-frontend-assets
So load livewire scripts on every page and remove any reference to alpine.
Please or to participate in this conversation.