Jan 4, 2024

Level 3

Livewire v3 Problem - /livewire/update 404 (Not Found)

To reproduce this problem at it's simplest level, create a component with a function that performs a database query on load, and has a button that performs that query again from the component.

<?php

namespace App\Livewire;

use App\Models\Event;
use Livewire\Component;

class LivewireUpdateNotFoundTest extends Component
{
    public $shows;

    public function mount() {
        $this->getShows();
    }

    public function getShows() {
        $this->shows = Event::all();
    }

    public function callGetShows() {
        $this->getShows();
    }

    public function render()
    {
        return view('livewire.livewire-update-not-found-test');
    }
}

<div>
    <button wire:click="callGetShows()">Call it again</button>
</div>

The query us successful the first time, but upon clicking the button to call it again, I get a 404 error on my site and in the console, I get:

POST http://127.0.0.1:8002/livewire/update 404 (Not Found)

I checked my php artisan route:list and /livewire/update is there. I tried clearing my route cache (and all caches) too.

I need this functionality in my actual application, but obviously to a more complex degree. This was working before I upgraded to v3. Any ideas?

LaryAI

2 years ago

Level 58

It seems like you're encountering an issue with Livewire after upgrading to version 3. Here are a few steps you can take to troubleshoot and potentially solve the problem:

Verify Livewire Assets: Ensure that you have published the latest Livewire assets after upgrading. You can do this by running:

php artisan livewire:publish --assets

Check Livewire Configuration: Make sure that the Livewire configuration file is up to date. If you haven't published the Livewire configuration file yet, you can do so with:

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

Clear Caches: Since you've already cleared your route cache, also ensure that you've cleared your view cache and config cache:

php artisan view:clear
php artisan config:clear

Check JavaScript Console: Look for any JavaScript errors in the browser's console that might be preventing Livewire from functioning correctly. Livewire relies on JavaScript to make requests to the server, so any JS errors could disrupt its operation.
Verify CSRF Token: Livewire needs a valid CSRF token to make POST requests. Ensure that your layout file includes the CSRF token meta tag:

<meta name="csrf-token" content="{{ csrf_token() }}">

And that your Livewire scripts are included after this meta tag.

Check Network Requests: Use your browser's developer tools to inspect the network request being made when you click the button. Ensure that the request is being sent to the correct URL and that no redirects are occurring that might change the request method from POST to GET.
Review Livewire Documentation: Since you've upgraded to Livewire v3, review the upgrade guide and release notes for any breaking changes or additional steps required after the upgrade.
Check Middleware: Ensure that the web middleware group (or whichever middleware group applies to your Livewire components) is properly configured and that no middleware is interfering with Livewire's routes.
Revert to a Previous State: If you're using version control like Git, consider reverting to a previous state before the upgrade to see if the problem persists. This can help you isolate whether the issue is directly related to the upgrade.

If none of these steps resolve the issue, you may want to consider posting more details on the Laracasts forum or the Livewire GitHub repository issues page to get help from the community or the maintainers. Be sure to include any additional error messages or logs that could help diagnose the problem.

RileyGWeb

2 years ago

Level 3

@LaryAI Thanks for the suggestions Lary. Unfortunately, none of these provided me with any luck.

RileyGWeb

2 years ago

Best Answer

Level 3

I found a good enough workaround on a different, similar question. If your query is performed on an Eloquent model, convert the collection to an array before you manipulate it at all.

public function getShows() {
    $this->shows = Event::all()->toArray;
}

If you already had some complex logic working on the collection like I did, this will create a decent amount of work switching to dealing with arrays instead of collections. But, it will get the 404 error to go away. At least, it did for me.

I don't know what changed, and I'm compelled to think this is a bug of some kind.

1 like

AllexNogue

2 years ago

Level 1

@Coaster132 Aqui não funcionou, tentei do jeito que falou.

O problema acontece apenas quando vou remover uma localização.


class Shipping extends Component
{

    use LivewireAlert;

    public $cities = null;
    public $_city = null;
    public $store_id = null;
 
    public $locationEdit = null;
    public $price = null;


    public function updated($input, $value)
    {
        if ($input == '_city' && strlen($value) > 1) {
            $this->cities = Cities::where('name', 'LIKE', '%'.$value.'%')->orderBy('name', 'ASC')->limit(10)->get(); 
        } else {
            $this->cities = null;
        }
    }

    public function editLocation($locationId)
    {
        $this->locationEdit = StoreLocations::store($this->store_id)->find($locationId);
        if ($this->locationEdit) {
            $this->price = ($this->locationEdit->price == 0 ) ? $this->locationEdit->price : 'R$ ' . number_format($this->locationEdit->price/100, 2, ',', '.');
        }
    }

    public function removeLocation($locationId)
    {
        $location = StoreLocations::store($this->store_id)->find($locationId);

        if ($location) {
            $location->delete(); 
            return $this->alert('success', 'Região removida.');
        }

    }

    public function addNewRegion($cityId)
    {
        $city = Cities::where('status', 'active')->find($cityId);

        if ($city) {
            $exist = StoreLocations::where('city_id', $city->id)->where('state_id', $city->state->id)->first();
            if (!$exist) {
                $location = new StoreLocations();
                $location->store_id = $this->store_id;
                $location->city_id = $city->id;
                $location->state_id = $city->state->id;
                $location->city = strtolower($city->name);
                $location->state = strtolower($city->state->sigla);
                $location->price = 0;
                $location->save();
                $this->_city = null;
                $this->cities = null; 
                return $this->alert('success', 'Região adicionada.'); 
            }
        }

    }
 
 
    public function mount()
    {
        $this->store_id = auth()->user()->stores[0]->id; 
    }

    public function render()
    {
        $locations = StoreLocations::store($this->store_id)->with('state')->get()->toArray(); 
        return view('livewire.config.shipping', compact('locations'));
    }
}

Quando eu chamo 'removeLocation' a primeira vez funciona, mas na seguintes recebo o erro de 404 not found.

Sad estou

amihp

1 year ago

Level 1

@RileyGWeb I have the Exact Same Problem but toArray() didn't make it work this code is written for Volt :

new class extends Component {

    public string $searchable;
    public string $currentSearchMarket;
    public $symbols;

    public function mount()
    {
        $this->searchable = '';
        $this->currentSearchMarket = '';
    }

    public function handleSearchMarketClick($name = '')
    {
        $this->currentSearchMarket = $name;
        $this->handleSearch();
    }

    public function handleSearch()
    {
        $symbols = Crypto::query()->take(5)->get();

        //After This 404 Happens
        $this->symbols = $symbols->map(function ($symbol) {
            return $symbol->makeTableColumns($symbol->getSearchArray());
        });

//dd($this->symbols)
    }
};

Result of dd($this->symbols) is :

Illuminate\Support\Collection {#1664 ▼ // resources\views\livewire\layouts\header.blade.php:42
  #items: array:5 [▼
    0 => {#1531 ▼
      +"id": 1182
      +"market": "1"
      +"name": "Bitcoin"
      +"short_name": "BTC"
      +"price": "57501.6"
      +"change_day_percent": "3.33"
      +"show_route": "http://localhost:8090/market/crypto/btc"
      +"logo_url": "https://static.example.net/images/cryptocurrency/BTC.png"
    }
    1 => {#1533 ▶}
    2 => {#1534 ▶}
    3 => {#1658 ▶}
    4 => {#1662 ▶}
  ]
  #escapeWhenCastingToString: false
}

Any Ideas ?

JoakimL

2 years ago

Level 8

Thanks @coaster132, this saved me from a lot more time wasted :)

veptune

1 year ago

Level 1

Hello, I have the same issue (and it not related to eloquent collection) :(

https://laracasts.com/discuss/channels/livewire/i-got-livewireupdate-404-not-found-in-js-console-when-wirepoll-is-triggered-and-the-render-function-is-not-called

Please or to participate in this conversation.