Can't use Filament components on 404 pages

[simonhamp]

Package

filament/filament

Package Version

v3.2.116

Laravel Version

v11.27.1

Livewire Version

v3.5.6

PHP Version

v8.3.11

Problem description

My error page template is customised so that it's not the standard Laravel 404 page. It's set to use my main layouts/app.blade.php and the page renders using this layout.

This layout includes @filamentStyles and @filamentScripts with the intention being to make use of some Filament components on the page, but when I hit a non-existent page, @filamentScripts fails to load any scripts needed for Filament to operate - they also 404.

If I swap it to use @livewireScripts, everything works.

So it looks like the @filamentScripts tag is preventing loading of these assets on a 404 somehow.

Expected behavior

I expect Livewire, Alpine and Filament scripts to be available to my page whether it's 404 or not.

Steps to reproduce

Create a errors/404.blade.php file that includes @filamentScripts, then visit a URL that isn't handled by a route in your application. See that the necessary <script> tags rendered but result in a 404 header and aren't loaded.

---

Swap @filamentScripts for @livewireScripts and note that the behaviour is different.

Reproduction repository (issue will be closed if this is not valid)

https://github.com/simonhamp/filament-scripts

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[awcodes]

Run php artisan filament:assets manually.

Doing this in your repo app loads them correctly on the 404.

[simonhamp]

@awcodes i haven't tried this yet, but can you enlighten me as to why this works?

Feels really strange to me to have separate behaviour.

[simonhamp]

@awcodes ok, so this fixed the apparent loading errors, but for some reason the actual behaviour is still different - I'll work up an example for my repo to try to express this, but basically Alpine still isn't available for some reason on the 404s

[stuartcusackie]

I'm having a similar problem with Alpine. I've noticed that if the current page doesn't contain any Livewire components then Alpine is not available. My scripts fail.

To workaround it I have to create a placeholder Livewire component. I then add that directly to my layout and Alpine is loaded correctly.

So it seems like Filament decides not to load it's scripts when there are no Livewire components on the current page. I think it should always load the scripts because Alpine may be needed on pages that don't have Livewire components.

layout.app.blade

// Just an empty livewire component to force Alpine to load.
<livewire:placeholder>
</body>

[danharrin]

I think this is fixed if you include @livewireScripts on your 404 page :) Which is the thing that loads Alpine. Or load the Alpine CDN.

[stuartcusackie]

@danharrin You still need at least one livewire component on page for alpine scripts to load. Sometimes you want alpine on a page that doesn't have any filament components.

[danharrin]

You can install Alpine on a page without loading Livewire, but it isn't Filament's responsibility to do so