404 error on any post request

[bitsalt]

What seems to be the problem: Any action that sends a POST request results in a 404 response. It’s as though I’ve missed a step in installation, where routing for “/livewire/message/{component-name}” should be declared. But I find no such requirement in any documentation.

Steps to Reproduce: I’m using Laravel 8 and Livewire 2.3. I used a simple example of incrementing a number on the page.

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples:
The component:

class Counter extends Component
{
public $count = 0;

public function render()
{
    return view('livewire.counter');
}

public function increment()
{
    $this->count++;
}

public function decrement()
{
    $this->count--;
}

}

…and the request:

<div>
    <span>{{ $count }}</span>
    <button wire:click="increment"> + </button>
    <button wire:click="decrement"> - </button>
</div>

[skywalker]

Hey, @bitsalt
Can you post the full code? Cause the question is not clear enough.

In general if you want to make a counter page you can do the following:

Create a component

php artisan make:livewire counter

Make a route:

Route::get('/counter', App\Http\Livewire\Counter::class);

In your counter.blade.php

<div>
   <span>{{ $count }}</span>
   <button wire:click="increment"> + </button>
   <button wire:click="decrement"> - </button>
</div>

In your component

...
public function increment()
{
    $this->count++;
}

public function decrement()
{
    $this->count--;
}

public function render()
{
    return view('livewire.counter');
}
...

That’s the code you need at the moment and If you have any question feel free to reply.

[bitsalt]

Thanks for responding, @skywalker. I’m not really trying to make a counter, but when my actual code didn’t work out, I dropped back to this example for its simplicity, thinking I’ve overlooked something basic. The code in question is pretty much exactly what you’ve relayed…very simple.

The route inclusion seems obvious, but it was never mentioned in any documentation. And after checking in with the “hello jelly” demo on laravel-livewire.com, I understand that the endpoint called is one that “Livewire automatically makes available.” So…it shouldn’t be necessary. But that seems to me to be the sticking point…there doesn’t seem to be an endpoint available.

Using your version of the defined route (or any of the variants tried below), it’s still not working for me. I stil get a 404 response for a post request to /ivewire/message/counter.

Route::get('/livewire/message/counter', \App\Http\Livewire\Counter::class);
Route::post('/livewire/message/counter', \App\Http\Livewire\Counter::class);
Route::get('/counter', \App\Http\Livewire\Counter::class);
Route::post('/counter', \App\Http\Livewire\Counter::class);

[skywalker]

Can you provide the actual code?

Because there’s no such method called post when you’re trying to call a livewire component.

So, You can do the following:

In your blade [without @csrf]

<form wire:submit.prevent="store">
 <input type="text" wire:model="name" .../>
<button>Submit</button>
</form>

And in your component

...
public $name;
public function store()
{
    Model::create(['name' => $this->name]);
}
...

And you are good to go!

You can see more here:

Upgrading From 1.x | Laravel

Please let me know if it’s work

[bitsalt]

I’m speaking of the ajax call behind all of this…the POST request that is answered with a 404 response. Everything is working fine until an action happens–i.e. calling increment or decrement–and the 404 page returns in response to the ajax POST request. (Perhaps it’s not even ajax, but I’m referring to the request/response as recorded in the console.)

I can include all of the code, but honestly, you’ve already seen it in the previous comments. I’ve attempted a very basic interaction to rule out anything I might introduce through my lack of Livewire knowledge.

I’ve put a skeletal version of the project on a public repos here:

https://github.com/bitsalt/tempshare

Thanks for your help!

[skywalker]

Alright, I’ll fork the repo and take a look

Update:

I see nothing in your code related with the question, can you specify exactly where is the issue?

[bitsalt]

The files are:
app/Http/Livewire/Counter.php
resources/views/index.blade.php (just includes the livewire:counter tag)
resources/views/livewire/counter.blade.php (The count display and increment/decrement buttons)

That’s all there is to this issue. It’s so basic that I think there must be some out-of-the-ordinary issue causing the failure. The page will load whatever value I give to $count in the Counter class. But when I click either of the buttons to change the value, I get a 404 error. I’ve included screenshots of the console in the hopes this will make things more clear.

I have highlighted the text in the modal that appears as the text is black on black. I’m not sure why the modal is there…perhaps a clue?

I’m apparently limited to only one image per post, so I’ve selected the one I think gives the most information.

[bitsalt]

Trying to load one more, if that’s allowed in a separate entry…

[skywalker]

It’s weird TBH, what about your APP_ENV configuration?

If you are using valet it may cause the issue sometimes, try to test the project with php artisan serve and see the things work.

[bitsalt]

The only difference I saw when running artisan serve is that the 404 modal looked better.

I’m not using valet, but I think I’ll try starting from a clean install, get this working as it should, and then add in packages with composer to see if/when it breaks. I’ll let you know if I find anything.

Thanks again for all your help and input.

[skywalker]

At least we do something great to making the error looks better

Alright, please let me know if you find anything.

[Pom]

What routes are registered?
php artisan route:list

[bitsalt]

Just the basics…the web root “/” and “api/user” are the only routes registered. Should the livewire setup have included more here? Perhaps a way to do that manually?

[skywalker]

No need for extra routes except the main route “/”

See this pull request, it may be interesting to you:

Fix 404 Error when making ajax Requests in projects hosted on a path in the domain

[bitsalt]

It was interesting, but I’m using the base path here. It led me to tinkering around a bit “under the hood” and in SupportRedirects I don’t see that any routes are produced in component.hydrate.

Could this be related to the router namespace changes in Laravel 8?

[Pom]

Yes, the following Livewire routes need to be registered:

[bitsalt]

What I saw in the docs indicated that the routes would be handled automatically. Regardless…I now have routes registered that match your example exactly…and still the same result.

I really want this to work, but I’ll need to cut my losses soon and handle this another way to keep the project moving. I appreciate your help. Please let me know if some other idea comes to mind.

[Pom]

The routes should have been registered automatically when you installed Livewire. Adding them manually won’t work.

Do you have “livewire/livewire” in your composer.json file?

[bitsalt]

Yes, it’s there and installed. I went through the documented setup…really not much to it. That’s why I can’t figure out why I’m getting this behavior. I included currently loaded versions in case you know of any known collisions. Thanks!

[Pom]

Did Livewire register the required routes or have you manually added them to your routes/web.php file? Are you still getting the 404 Not Found on the livewire/message/{name} POST route?