Getting blank screen while navigation inside a navigationGroup using spa()

[AbhinavNmdo]

Package

filament/filament

Package Version

v3.0.37

Laravel Version

v10.28

Livewire Version

v3.0.8

PHP Version

PHP 8.1

Problem description

I found a bug while I am using spa(). While I am navigation form one route to another route inside a navigationGroup, I got a blank screen until I reload the page.

And the result is:

Expected behavior

It will have to route to the respective url

Steps to reproduce

1. Frist, navigate to any route inside the navigationGroup.
2. Now, try to navigate on the another route, it will show blank screen.

If you refresh the page on the blank screen it will redirect you to the previous route.

Reproduction repository

https://github.com/AbhinavNmdo/InvestingDelta

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!

[zepfietje]

Please provide any console errors.

[AbhinavNmdo]

Here are some errors...
127.0.0.1-1697384856263.log

[isrardogar]

same problem here. blank screen when navigating from one resource to another, using spa()

[danharrin]

Should be fixed in the latest releases but let us know if not

[Antonides]

In Chrome everything works fine in Safari i still get random blank pages. Console doesn't show any errors

[wannesmatthys]

Same issue here

[moisessepulveda]

Same issue using safari

[melloradamj]

Getting this in safari too, but only when clicking between a few pages in quick succession. It then gives the console error:
Attempt to use history.replaceState() more than 100 times per 10 seconds

[andruu]

Can confirm getting this error in spa mode.

SecurityError: Attempt to use history.replaceState() more than 100 times per 10 seconds

[danharrin]

Not trying to shift the blame here, and it might be tricky to reproduce, but I don't think this is going to be an issue inside Filament's codebase. It's probably something in Livewire's wire:navigate. Anyone who wants to see this solved should start investigating that path and eventually submit a report to Livewire, probably as a failing test PR. Adding +1-like comments is not going to make things move, the Filament team are not the only ones who are able to solve problems

Edit: Not sure why people are downvoting this, I'm not sure what I can do if I don't encounter the problem? There isn't even a reproduction repository, the one linked 404s

[ZacharyDuBois]

Also able to reproduce with a simple project (~5 simple models). I haven't actually run into this with Livewire alone (yet). On a plain Livewire project, I was unable to reproduce. But then again, that plain project wasn't producing as many links on a single page.

[kaidoj]

Same with version 3.2.86. Getting in the production build using SPA with Safari. This actually makes the filament admin unusable in Safari. It even happens when I click multiple times on the list page breadcrumb in a row. It doesn't happen when I switch between table tabs. If I find time to check into this deeper, I will.

Console error -> SecurityError: Attempt to use history.replaceState() more than 100 times per 10 seconds

Edit: I found a workaround from here. So far seems it works well. I added a custom script asset following the filament documentation.

[bigboypantson]

Same, getting this: Attempt to use history.replaceState() more than 100 times per 10 seconds

[eduwass]

Happening here too, as @danharrin said, it appears this might be an issue in Livewire. If you search for the error in the Livewire repository, you'll see that a discussion has started here:

livewire/livewire#5923

This discussion includes the workaround that @kaidoj mentioned above, although that solution may not be ideal.

There's also an older issue in the Livewire repository that seems related, but it was marked as resolved:

livewire/livewire#1496

Edit: I think the best path is to try and generate a failing test, like what Josh Hanley tried doing in this comment here livewire/livewire#5923 (comment) and report it to the livewire team

[andrewdwallo]

@danharrin I think I may have found the issue. It's possible that I'm wrong but I investigated the stacktrace and the code leading to it. The issue was occurring for me in an app that doesn't use SPA mode. livewire/livewire#7746 (comment)

[Murkrow02]

I get the same error on Firefox when using spa() in panel provider after navigating for a bit

[Milad-Sarli]

same issue i have when i open a modal action in any of my resources
my entire screen goes black.
but i tested it with spa or without but results are same .

[danharrin]

Are you on the latest Filament version? @Milad-Sarli

[andrewdwallo]

Well the issue would still exists if Caleb didn't merge the fix for the issue right? Yes the issue does happen in both SPA and non-SPA apps. Essentially anything that uses URL query strings.

[danharrin]

I think he is talking about the recent broken Livewire version and not the same issue as this one, I released a patch for that today.

[marloonline123]

does it happen for you guys when you press any action in table like sorting filtering and so on.., this what happening to me in filament i get blank blach screen nothing clickable and no error messages in brwoser console nor in laravel log file

[danharrin]

The issue you describe is not the same, please make sure you are on the latest Filament version

[gorthal]

@marloonline123 : I had the same problem and updating FilamentPHP to version 3.2.131 solve it.

[DenyEs]

This is still broken and happening in v3.2.135. I use Firefox and navigating between resources too quickly makes the screen go blank in both SPA and non SPA mode

[dirop1]

I had this problem and fixed it by going to config/livewire.php and changed this from false to true:

'inject_assets' => true,

Hope it helps someone

[DenyEs]

I had this problem and fixed it by going to config/livewire.php and changed this from false to true:

'inject_assets' => true,

Hope it helps someone

Unfortunately, it doesn't help in my case. Navigating too quickly still triggers the blank screen and an error in the console.

Too many calls to Location or History APIs within a short timeframe.

[Jacobtims]

This is still an issue on Filament v3.2.136 and Livewire v3.5.12, both on SPA and non SPA mode.