filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.4k stars 2.97k forks source link

Can't use Filament components on 404 pages #14519

Open simonhamp opened 1 month ago

simonhamp commented 1 month ago

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.

Screenshot 2024-10-14 at 15 30 56


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

Screenshot 2024-10-14 at 15 33 10

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

Fund with Polar

awcodes commented 1 month ago

Run php artisan filament:assets manually.

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

simonhamp commented 3 weeks ago

@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 commented 3 weeks ago

@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 commented 3 weeks ago

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>