Custom action buttons not working in production

I'm facing a perplexing issue after updating my Laravel app to Livewire v3 and Filament v3. The custom action buttons in my app seem to work perfectly fine when running locally, but when deployed to a production environment, they stop functioning as expected. Problem Description: - I have recently updated my Laravel app to use the latest versions of Livewire and Filament (v3). - These custom action buttons trigger specific actions when clicked, such as clearing the cache. - Locally, everything works as expected. However, in my production environment, the buttons do not respond when clicked. Troubleshooting Steps Taken - Tried clearing cache - Checked for console errors, but nothing showed up If anyone has any suggestions, solutions, or even similar experiences to share, I'd greatly appreciate your input. Your help in resolving this issue would be invaluable.
Solution:
I'm pleased to share that I found a fix for the issue. It turns out that the problem was related to HTML minification by Cloudflare in my production environment. Disabling this feature resolved the issue.
Jump to solution
5 Replies
cheesegrits
cheesegrits15mo ago
Can you give us some example code?
krixx1337
krixx1337OP15mo ago
Yea, here is one of my pages with buttons
<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\TextInput;
use Filament\Actions\Action;
use Filament\Pages\Page;

class ClearCache extends Page
{
protected static ?string $navigationIcon = 'heroicon-o-document-text';

protected static string $view = 'filament.pages.clear-cache';

protected static ?string $navigationGroup = 'Pages';

protected function getHeaderActions(): array
{
return [
Action::make('clearCache')
->action(function (array $data): void {
$key = $data['cacheKey'];
cache()->forget($key);
})
->form([
TextInput::make('cacheKey')
->required(),
])
->requiresConfirmation(),
Action::make('clearAll')
->action(fn () => cache()->flush())
->color('danger')
->requiresConfirmation(),
];
}
}
<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\TextInput;
use Filament\Actions\Action;
use Filament\Pages\Page;

class ClearCache extends Page
{
protected static ?string $navigationIcon = 'heroicon-o-document-text';

protected static string $view = 'filament.pages.clear-cache';

protected static ?string $navigationGroup = 'Pages';

protected function getHeaderActions(): array
{
return [
Action::make('clearCache')
->action(function (array $data): void {
$key = $data['cacheKey'];
cache()->forget($key);
})
->form([
TextInput::make('cacheKey')
->required(),
])
->requiresConfirmation(),
Action::make('clearAll')
->action(fn () => cache()->flush())
->color('danger')
->requiresConfirmation(),
];
}
}
cheesegrits
cheesegrits15mo ago
Strange. That code all looks just fine. So I tested it by just adding a page to the demo app (using 'php artisan make:filament-page Settings'), then pasting your getHeaderActions() method into it. And it works exactly as one would expect. So I'm not sure why it would fail in your production environment, but that does obviously suggest an issue with deployment. Are you running filament:upgrade in your Composer post-update-cmd scripts?
"scripts": {
//
"post-update-cmd": [
//
"@php artisan filament:upgrade"
],
"scripts": {
//
"post-update-cmd": [
//
"@php artisan filament:upgrade"
],
krixx1337
krixx1337OP15mo ago
Thank you for taking the time to look into my issue and for your helpful testing. I really appreciate your efforts. Regarding your question, yes, I am running filament:upgrade in my Composer post-update-cmd scripts. It's quite puzzling why this problem only occurs in the production environment despite everything appearing to be in order. I didn't have issues like that with Filament v2.
Solution
krixx1337
krixx133715mo ago
I'm pleased to share that I found a fix for the issue. It turns out that the problem was related to HTML minification by Cloudflare in my production environment. Disabling this feature resolved the issue.
Want results from more Discord servers?
Add your server