Filament•3mo ago

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•3mo ago

remove this from your app.js. other pages without Filament components where?

JuunNLOP•3mo ago

When I remove this from my app other pages where no filament components are rendered dont have the AplineJS included

toeknee•3mo 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

JuunNLOP•3mo 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•3mo 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.

Gaming

Programming

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