Filament•16mo ago

Issues with using custom JS scripts

Hello, I am using table builder v3 and I am having 3 main problems when trying to use some custom Alpine javascript with filament. 1. If the body in my app.blade.php looks like this (below) then when I try to use the search feature on the table builder, I get no errors in the console but the animation "breaks" where the spinner on the search bar of the table spins infinitely even if the search has finished running.

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@livewireScriptConfig
@vite('resources/js/app.js')
</body>

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@livewireScriptConfig
@vite('resources/js/app.js')
</body>

2. The issue fixes itself if the body part in my app.blade.php file looks like this (below). If I do this, I get no issues with the table animations but my app.js script doesn't work correctly (eg: it cannot load $persist from alpine through livewire because the @livewireScriptConfig tag is missing). This also gives me errors in the console where it says that I have multiple instances of livewire and alpine running.

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@vite('resources/js/app.js')
</body>

<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">
{{ $slot }}
@filamentScripts
@vite('resources/js/app.js')
</body>

3. I could remove the custom script tag but then I lose all javascript functionality within my page. Here is my app.js script:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

document.addEventListener('alpine:init', () => {
    Alpine.store('sidebar', {
        isOpen: Alpine.$persist(true).as('sidebar_isOpen'),
        close() {
            this.isOpen = false;
        },
        toggle() {
            this.isOpen = !this.isOpen
        }
    })

    Alpine.store('darkMode', {
        on: Alpine.$persist(true).as('darkMode_on'),
        toggle() {
            this.on = !this.on;
        }
    })
})

Livewire.start()

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

document.addEventListener('alpine:init', () => {
    Alpine.store('sidebar', {
        isOpen: Alpine.$persist(true).as('sidebar_isOpen'),
        close() {
            this.isOpen = false;
        },
        toggle() {
            this.isOpen = !this.isOpen
        }
    })

    Alpine.store('darkMode', {
        on: Alpine.$persist(true).as('darkMode_on'),
        toggle() {
            this.on = !this.on;
        }
    })
})

Livewire.start()

2 Replies

toeknee•16mo ago

So livewireScripts should come before filament because filament depends on it.

VinnyOP•16mo ago

I tried that too. Still the same issue as 1. @livewireScripts is replaced by @filamentScripts but @livewireScriptConfig is something different in livewire v3 its required to be able to import alpine from a JS module since alpine is bundled with livewire now. regardless, like i said, i tried that and still the same issue as 1.

Gaming

Programming

Issues with using custom JS scripts