F
Filamentβ€’4mo ago
Juun

Getting "Detected multiple instances of Alpine" and not sure on how to attack this issue

Hi! I use Filament for my admin via the panel builder which is superb. I now started to use the table builder for one component in the frontend of my application. I now run into an AlpineJS conflict and not sure how to attack this. In my footer I have @FilamentScripts In my app.js I have
import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();
import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();
On pages where Filament components are included this results in not working components. When I comment out app.js Filament pages work but other pages without Filament components I can not use Alpine. I can not wrap my head around how to attack this in a good way. I would appreciate help πŸ™‚
5 Replies
LeandroFerreira
LeandroFerreiraβ€’4mo ago
remove this from your app.js. other pages without Filament components where?
Juun
JuunOPβ€’4mo ago
When I remove this from my app other pages where no filament components are rendered dont have the AplineJS included
toeknee
toekneeβ€’4mo ago
I was fairly sure that was not needed when importing with bootstrap... On your other pages, you need to ensure the filamentscripts is called
Juun
JuunOPβ€’4mo ago
It is called as it uses the same component
@filamentScripts
@vite(['resources/js/app.js'])
@filamentScripts
@vite(['resources/js/app.js'])
That is called on every page, with or without filament components as per the docs
awcodes
awcodesβ€’4mo ago
Since you are including alpine manually in your app.js you have to load livewire differently. https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine
Laravel
Installation | Laravel
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
Want results from more Discord servers?
Add your server