Frequentemente, depois de instalar o pacote Filament Admin Panel em um novo projeto Laravel, você pode se deparar com um problema recorrente. A página login continua recarregando sem nenhum erro, e um ponto de interrogação “?” é anexado ao URL todas as vezes.

É provável que esse problema ocorra quando você tenta acessar a página de login por meio da URL localhost e também persiste quando você ativa o aplicativo em um servidor de produção.

Esta postagem do blog irá orientá-lo sobre como diagnosticar e resolver esse problema.

Compreendendo o erro Livewire 404 no Filament

Esse problema pode ser rastreado até um erro “404 not found” que aparece no console do navegador.

Livewire 404 Error
Livewire 404 Error

Este erro está associado ao livewire.js, um componente crítico do Livewire - o pacote do qual o Filament depende. Essencialmente, o aplicativo Laravel não pode localizar este arquivo JavaScript, resultando em um ciclo de redirecionamento com falha na página de login.

Solução 1: publicação de assets Livewire

Um dos métodos mais diretos para resolver esse problema é publicar os assets Livewire usando o seguinte comando:

php artisan vendor:publish --force --tag=livewire:assets

A execução deste comando publicará os recursos no diretório /public/vendor/livewire/livewire.js, que o Laravel agora pode acessar facilmente. No entanto, essa correção pode não ser suficiente por conta própria; você ainda pode precisar ajustar o asset_url no arquivo de configuração do Livewire.

Solução 2: Modificando o asset_url na Configuração do Livewire

Outra solução prática envolve modificar a configuração asset_url diretamente no arquivo de configuração do Livewire (config/livewire.php). No entanto, antes de fazer isso, você precisará publicar o arquivo de configuração usando este comando:

php artisan vendor:publish --tag=livewire:config

Depois de publicar o arquivo de configuração, localize a configuração asset_url no arquivo config/livewire.php e altere-a para corresponder ao seu domínio local ou de produção, assim:

'asset_url' => "http://localhost/my_project/public",

Mas eu prefiro usar a configuração APP_URL do aplicativo para definir a variável Livewire asset_url:

'asset_url' => env(APP_URL),

Solução 3: Configuração do NGINX

Para aqueles que usam o NGINX como servidor, o problema pode resultar de como o NGINX atende a arquivos estáticos. Por padrão, o NGINX serve diretamente e armazena em cache arquivos estáticos sem envolver o interpretador PHP. Portanto, ele nunca chega à parte do PHP que constrói o arquivo livewire.js dinamicamente quando não consegue encontrar o arquivo.

Para resolver isso, ajuste sua configuração do NGINX para verificar primeiro o arquivo estático e, se ele não existir, passe a solicitação para o PHP-FPM. Isso pode ser feito adicionando a seguinte linha na diretiva location na configuração do NGINX:

try_files $uri /index.php?$query_string;

Lembre-se de limpar o cache de configuração usando o comando php crafts config:clear depois de fazer essas alterações para garantir que o Laravel comece a usar a configuração atualizada.

Considerações Finais

Embora essas correções provavelmente resolvam o problema, é essencial observar que o problema subjacente está na decisão da Livewire de usar a URL localhost como asset_url padrão. Idealmente, o URL padrão deve ser obtido dinamicamente da configuração APP_URL no arquivo .env.

É esperado que esse comportamento será ajustado em versões futuras do Livewire.