Filament•3mo ago

An issue with loading JS when linking to the dashboard

For some reason, the JavaScript on the page doesn't load properly when navigating to the dashboard, as shown in the video, although it works fine upon refreshing. I just tested it on a freshly installed Laravel/Filament app, with npm run build + npm run dev Laravel Version ..... 11.19.0 Filament ..... v3.2.97 Livewire ..... v3.5.4 Video in comments 👇

Solution:

Yeah. So nothing we can do about it. Not sure whether it's a "bug" or just not considered an option for SPA mode. I mean it's not really an SPA at that point anymore.

Jump to solution

18 Replies

Dennis Koch•3mo ago

Do you use ->spa() mode? Also: Please don't post videos with background music 😅 Just listened to the weirdest remix ever

MiloudiMohamed•3mo ago

No, spa() is not enabled in filament, although the link adminitration has wire:navigate on it. *Sorry about the music, I thought it wasn't recorded lol, I'll reupload an edited version *

MiloudiMohamed•3mo ago

toeknee•3mo ago

you have lots of issues there run: npm run build How are you also serving the application?

MiloudiMohamed•3mo ago

I think the issues are related to the same problem (not loading js files) I ran npm run build and also npm run dev for a second test, and the issues went away after refreshing or typing the link directly I just use php artisan serve

toeknee•3mo ago

and is the .env app_url the same as what you are access the app over? I suspect not.

MiloudiMohamed•3mo ago

Yes it is the same. I think this is a very specific issue where it only happens when navigating to the admin panel by clicking a link that has `wire:navigate' Not sure if it's worth investigating but if so, I can create a reproduction repo

toeknee•3mo ago

Look at your network logs for why they are failing, it'll be url issue I recommend herd for localised dev.

MiloudiMohamed•3mo ago

No, weirdly everything is loaded correctly

MiloudiMohamed•3mo ago

I use valet usually & I just can't do the switch atm

toeknee•3mo ago

valet is a smaller version of herd. So fine, should need to run php artisan serve then. Provide more indepth reporting of the rrors.

awcodes•3mo ago

Looks like jetstream is using spa mode. That's why you are seeing the wire:navigate on the link. The problem with that is that wire:navigate doesn't reload the page, as a side effect all of filament's js and css assets don't get loaded on the page. i'm surprised the errors are for livewire.js though. can you share the console errors in a screenshot?

MiloudiMohamed•3mo ago

Sure

livewire.js?id=cc800bf4:1129 Uncaught 
TypeError: Cannot read properties of undefined (reading 'isOpen')
    at [Alpine] ! $store.sidebar.isOpen (eval at safeAsyncFunction (livewire.js?id=cc800bf4:1176:21), <anonymous>:3:49)
    at livewire.js?id=cc800bf4:1198:23
    at tryCatch (livewire.js?id=cc800bf4:1118:14)
    at livewire.js?id=cc800bf4:3609:19
    at reactiveEffect (livewire.js?id=cc800bf4:2417:18)
    at Object.effect2 [as effect] (livewire.js?id=cc800bf4:2392:7)
    at effect (livewire.js?id=cc800bf4:763:35)
    at wrappedEffect (livewire.js?id=cc800bf4:779:29)
    at Function.<anonymous> (livewire.js?id=cc800bf4:3609:5)
    at flushHandlers (livewire.js?id=cc800bf4:1283:48)
[Alpine] ! $store.sidebar.isOpen    @    VM767:3
(anonymous)    @    livewire.js?id=cc800bf4:1198
tryCatch    @    livewire.js?id=cc800bf4:1118
(anonymous)    @    livewire.js?id=cc800bf4:3609
reactiveEffect    @    livewire.js?id=cc800bf4:2417
effect2    @    livewire.js?id=cc800bf4:2392
effect    @    livewire.js?id=cc800bf4:763
wrappedEffect    @    livewire.js?id=cc800bf4:779
(anonymous)    @    livewire.js?id=cc800bf4:3609
flushHandlers    @    livewire.js?id=cc800bf4:1283
stopDeferring    @    livewire.js?id=cc800bf4:1288
deferHandlingDirectives    @    livewire.js?id=cc800bf4:1291
initTree    @    livewire.js?id=cc800bf4:1478
nowInitializeAlpineOnTheNewPage    @    livewire.js?id=cc800bf4:7911
(anonymous)    @    livewire.js?id=cc800bf4:7831
(anonymous)

livewire.js?id=cc800bf4:1129 Uncaught 
TypeError: Cannot read properties of undefined (reading 'isOpen')
    at [Alpine] ! $store.sidebar.isOpen (eval at safeAsyncFunction (livewire.js?id=cc800bf4:1176:21), <anonymous>:3:49)
    at livewire.js?id=cc800bf4:1198:23
    at tryCatch (livewire.js?id=cc800bf4:1118:14)
    at livewire.js?id=cc800bf4:3609:19
    at reactiveEffect (livewire.js?id=cc800bf4:2417:18)
    at Object.effect2 [as effect] (livewire.js?id=cc800bf4:2392:7)
    at effect (livewire.js?id=cc800bf4:763:35)
    at wrappedEffect (livewire.js?id=cc800bf4:779:29)
    at Function.<anonymous> (livewire.js?id=cc800bf4:3609:5)
    at flushHandlers (livewire.js?id=cc800bf4:1283:48)
[Alpine] ! $store.sidebar.isOpen    @    VM767:3
(anonymous)    @    livewire.js?id=cc800bf4:1198
tryCatch    @    livewire.js?id=cc800bf4:1118
(anonymous)    @    livewire.js?id=cc800bf4:3609
reactiveEffect    @    livewire.js?id=cc800bf4:2417
effect2    @    livewire.js?id=cc800bf4:2392
effect    @    livewire.js?id=cc800bf4:763
wrappedEffect    @    livewire.js?id=cc800bf4:779
(anonymous)    @    livewire.js?id=cc800bf4:3609
flushHandlers    @    livewire.js?id=cc800bf4:1283
stopDeferring    @    livewire.js?id=cc800bf4:1288
deferHandlingDirectives    @    livewire.js?id=cc800bf4:1291
initTree    @    livewire.js?id=cc800bf4:1478
nowInitializeAlpineOnTheNewPage    @    livewire.js?id=cc800bf4:7911
(anonymous)    @    livewire.js?id=cc800bf4:7831
(anonymous)

livewire.js?id=cc800bf4:1129 Uncaught 
TypeError: Cannot read properties of undefined (reading 'isOpen')
    at [Alpine] $store.sidebar.isOpen (eval at safeAsyncFunction (livewire.js?id=cc800bf4:1176:21), <anonymous>:3:47)
    at livewire.js?id=cc800bf4:1198:23
    at tryCatch (livewire.js?id=cc800bf4:1118:14)
    at livewire.js?id=cc800bf4:3609:19
    at reactiveEffect (livewire.js?id=cc800bf4:2417:18)
    at Object.effect2 [as effect] (livewire.js?id=cc800bf4:2392:7)
    at effect (livewire.js?id=cc800bf4:763:35)
    at wrappedEffect (livewire.js?id=cc800bf4:779:29)
    at Function.<anonymous> (livewire.js?id=cc800bf4:3609:5)
    at flushHandlers (livewire.js?id=cc800bf4:1283:48)
[Alpine] $store.sidebar.isOpen    @    VM769:3
(anonymous)    @    livewire.js?id=cc800bf4:1198
tryCatch    @    livewire.js?id=cc800bf4:1118
(anonymous)    @    livewire.js?id=cc800bf4:3609
reactiveEffect

livewire.js?id=cc800bf4:1129 Uncaught 
TypeError: Cannot read properties of undefined (reading 'isOpen')
    at [Alpine] $store.sidebar.isOpen (eval at safeAsyncFunction (livewire.js?id=cc800bf4:1176:21), <anonymous>:3:47)
    at livewire.js?id=cc800bf4:1198:23
    at tryCatch (livewire.js?id=cc800bf4:1118:14)
    at livewire.js?id=cc800bf4:3609:19
    at reactiveEffect (livewire.js?id=cc800bf4:2417:18)
    at Object.effect2 [as effect] (livewire.js?id=cc800bf4:2392:7)
    at effect (livewire.js?id=cc800bf4:763:35)
    at wrappedEffect (livewire.js?id=cc800bf4:779:29)
    at Function.<anonymous> (livewire.js?id=cc800bf4:3609:5)
    at flushHandlers (livewire.js?id=cc800bf4:1283:48)
[Alpine] $store.sidebar.isOpen    @    VM769:3
(anonymous)    @    livewire.js?id=cc800bf4:1198
tryCatch    @    livewire.js?id=cc800bf4:1118
(anonymous)    @    livewire.js?id=cc800bf4:3609
reactiveEffect

I think this is the right explanation, although, is this an expected issue?

Dennis Koch•3mo ago

So if you remove this, does it work?

MiloudiMohamed•3mo ago

Yes, when the page gets reloaded due to a normal link naviagation it works

Dennis Koch•3mo ago

i'm surprised the errors are for livewire.js though. can you share the console errors in a screenshot?

JS is not loaded, Alpine tries to run JS code from a file that was not loaded.

Solution

Dennis Koch•3mo ago

Yeah. So nothing we can do about it. Not sure whether it's a "bug" or just not considered an option for SPA mode. I mean it's not really an SPA at that point anymore.

MiloudiMohamed•3mo ago

I know it's not even a big problem, I noticed this issue when I tried to set up Filament with NativePHP and I wanted to raise attention in case it's an actual problem. Anyway, thank you all for you help and time 🙏

Gaming

Programming

An issue with loading JS when linking to the dashboard