Filament•15mo ago

Using Alpine.js inside the existing app with Filament table

Hi, I have a Laravel application and am using Alpine and have a Filament Table installed inside the application - app.js

import Alpine from 'alpinejs'

Alpine.data('some-data', () => ({
    //
})

Alpine.start()

import Alpine from 'alpinejs'

Alpine.data('some-data', () => ({
    //
})

Alpine.start()

- layouts/app.blade.php

@filamentScripts
<script src="{{ asset('js/app.js') }}"></script>

@filamentScripts
<script src="{{ asset('js/app.js') }}"></script>

But I'm having a problem: a javascript error is reported in the browser console when accessing a page that uses the Filament table.

Uncaught TypeError: Cannot read properties of undefined (reading '$on')
    at Proxy.init (eval at safeAsyncFunction (app.js:605:14), <anonymous>:13:24)
    at app.js:591:23
    at tryCatch (app.js:545:12)
    at evaluate (app.js:571:32)
    at Function.<anonymous> (app.js:2924:27)
    at flushHandlers (app.js:709:46)
    at stopDeferring (app.js:714:5)
    at deferHandlingDirectives (app.js:717:3)
    at initTree (app.js:200:3)
    at app.js:155:5

Uncaught TypeError: Cannot read properties of undefined (reading '$on')
    at Proxy.init (eval at safeAsyncFunction (app.js:605:14), <anonymous>:13:24)
    at app.js:591:23
    at tryCatch (app.js:545:12)
    at evaluate (app.js:571:32)
    at Function.<anonymous> (app.js:2924:27)
    at flushHandlers (app.js:709:46)
    at stopDeferring (app.js:714:5)
    at deferHandlingDirectives (app.js:717:3)
    at initTree (app.js:200:3)
    at app.js:155:5

So is there any way to fix this problem? Thanks guys.

1 Reply

awcodes•15mo ago

You’re going to have to change how you’re including alpine. https://livewire.laravel.com/docs/upgrading#alpinejs

Laravel

Upgrade Guide | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Gaming

Programming

Using Alpine.js inside the existing app with Filament table