F
Filament•6d ago
sparclex

Custom async alpine component field with vite and without panel

I have an existing laravel installation with filament components (without the panel builder). Now I want to add a custom field with an async alpine component and do not want to install esbuild since I already have vite. In my app.js file i register the component. 
import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import AsyncAlpine from 'async-alpine';
import './bootstrap'

Alpine.plugin(AsyncAlpine);
Alpine.asyncData('tselect', () => {
    console.log('loading typesense select')
    return import("./filament/typesense-select.js");
});
Livewire.start()
import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import AsyncAlpine from 'async-alpine';
import './bootstrap'

Alpine.plugin(AsyncAlpine);
Alpine.asyncData('tselect', () => {
    console.log('loading typesense select')
    return import("./filament/typesense-select.js");
});
Livewire.start()
My base layout file ends with 
@livewireScriptConfig
@filamentScripts
@vite([
'resources/js/app.js',
])
</body>
@livewireScriptConfig
@filamentScripts
@vite([
'resources/js/app.js',
])
</body>
But when initializing the component with the following code 
    <div
        x-load
        x-data="tselect"></div>
    <div
        x-load
        x-data="tselect"></div>
I get the error that tselect is not defined. When I remove the @filamentScripts the async component loads. Does anyone has an Idea how to get this working?
1 Reply
sparclex
sparclexOP•6d ago
I just managed to get it working with the following code 
document.addEventListener('alpine:init', () => {
  Alpine.plugin(AsyncAlpine);
  Alpine.asyncData('tselect', () => import("./filament/typesense-select.js"));
});
document.addEventListener('alpine:init', () => {
  Alpine.plugin(AsyncAlpine);
  Alpine.asyncData('tselect', () => import("./filament/typesense-select.js"));
});
But why does it not work normally?

Did you find this page helpful?