Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jimbocity's avatar

Livewire 3 with Laravel 10 upgrade. 500 error!

Please can anyone help. A time-critical project is now wrecked!

I upgraded from Laravel 9 to 10.34.2, and Livewire 2 to 3. I'm running php 8.2.12 I have a page that, on click, calls a Livewire method. I have simplified it here for assistance:

  <x-button type="button"  wire:click="tester">
               Test button
  </x-button>

The component PHP looks like this (again, code removed for simplcity):

<?php

namespace App\Livewire\Bookings;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class Details extends Component
{
   public function tester(){
       dd("test");
   }
   .
   .
   .
}

The "dd" request is just for testing. I can remove it and just add code but the same error occurs. Previously with Livewire 2 and Laravel 9 this was no problem. When a run this now with the upgraded version I get a LOT of errors (below). The request doesn't appear to get as far as my component code:


POST http://mbp.test/livewire/update 500 (Internal Server Error)
(anonymous) @ livewire.js?id=af0b760a:536
queueNewRequestAttemptsWhile @ livewire.js?id=af0b760a:614
sendRequestToServer @ livewire.js?id=af0b760a:508
(anonymous) @ livewire.js?id=af0b760a:494
(anonymous) @ livewire.js?id=af0b760a:502
setTimeout (asynchron)
bundleMultipleRequestsTogetherIfTheyHappenWithinFiveMsOfEachOther @ livewire.js?id=af0b760a:501
triggerSend @ livewire.js?id=af0b760a:493
(anonymous) @ livewire.js?id=af0b760a:651
(anonymous) @ livewire.js?id=af0b760a:608
waitUntilTheCurrentRequestIsFinished @ livewire.js?id=af0b760a:604
requestCall @ livewire.js?id=af0b760a:649
(anonymous) @ livewire.js?id=af0b760a:4177
eval @ VM18512:3
(anonymous) @ livewire.js?id=af0b760a:1321
tryCatch @ livewire.js?id=af0b760a:1245
evaluate @ livewire.js?id=af0b760a:1269
(anonymous) @ livewire.js?id=af0b760a:7064
callAndClearComponentDebounces @ livewire.js?id=af0b760a:7050
x-on:click @ livewire.js?id=af0b760a:7063
(anonymous) @ livewire.js?id=af0b760a:1289
tryCatch @ livewire.js?id=af0b760a:1245
(anonymous) @ livewire.js?id=af0b760a:3752
handler4 @ livewire.js?id=af0b760a:3126
(anonymous) @ livewire.js?id=af0b760a:3191
(anonymous) @ livewire.js?id=af0b760a:3128
livewire.js?id=af0b760a:445 [Violation]Avoid using document.write().
showHtmlModal @ livewire.js?id=af0b760a:445
showFailureModal @ livewire.js?id=af0b760a:599
(anonymous) @ livewire.js?id=af0b760a:558
VM18515:8 {report: {…}, shareableReport: {…}, config: {…}, solutions: Array(0), updateConfigEndpoint: '/_ignition/update-config'} {frames: Array(51), context_items: {…}, custom_context_items: Array(0), type: 'web', entry_point: 'http://mbp.test/seminar/28', …}
VM18515:8  Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Au (<anonymous>:8:256466)
    at bf (<anonymous>:3:186649)
    at <anonymous>:3:221181
    at yp (<anonymous>:3:222533)
    at HTMLUnknownElement.y (<anonymous>:3:103635)
    at Object.Hn (<anonymous>:3:103960)
    at Kn (<anonymous>:3:104921)
    at Ih (<anonymous>:3:270720)
    at uh (<anonymous>:3:261945)
    at sh (<anonymous>:3:261807)
Au @ VM18515:8
bf @ VM18515:3
(anonymous) @ VM18515:3
yp @ VM18515:3
y @ VM18515:3
Hn @ VM18515:3
Kn @ VM18515:3
Ih @ VM18515:3
uh @ VM18515:3
sh @ VM18515:3
lh @ VM18515:3
Xm @ VM18515:3
Vm @ VM18515:3
wg @ VM18515:3
(anonymous) @ VM18515:3
Km @ VM18515:3
Kg @ VM18515:3
t.render @ VM18515:3
window.ignite @ VM18515:8
(anonymous) @ VM18516:2
showHtmlModal @ livewire.js?id=af0b760a:445
showFailureModal @ livewire.js?id=af0b760a:599
(anonymous) @ livewire.js?id=af0b760a:558
await in (anonymous) (asynchron)
queueNewRequestAttemptsWhile @ livewire.js?id=af0b760a:614
sendRequestToServer @ livewire.js?id=af0b760a:508
(anonymous) @ livewire.js?id=af0b760a:494
(anonymous) @ livewire.js?id=af0b760a:502
setTimeout (asynchron)
bundleMultipleRequestsTogetherIfTheyHappenWithinFiveMsOfEachOther @ livewire.js?id=af0b760a:501
triggerSend @ livewire.js?id=af0b760a:493
(anonymous) @ livewire.js?id=af0b760a:651
(anonymous) @ livewire.js?id=af0b760a:608
waitUntilTheCurrentRequestIsFinished @ livewire.js?id=af0b760a:604
requestCall @ livewire.js?id=af0b760a:649
(anonymous) @ livewire.js?id=af0b760a:4177
eval @ VM18512:3
(anonymous) @ livewire.js?id=af0b760a:1321
tryCatch @ livewire.js?id=af0b760a:1245
evaluate @ livewire.js?id=af0b760a:1269
(anonymous) @ livewire.js?id=af0b760a:7064
callAndClearComponentDebounces @ livewire.js?id=af0b760a:7050
x-on:click @ livewire.js?id=af0b760a:7063
(anonymous) @ livewire.js?id=af0b760a:1289
tryCatch @ livewire.js?id=af0b760a:1245
(anonymous) @ livewire.js?id=af0b760a:3752
handler4 @ livewire.js?id=af0b760a:3126
(anonymous) @ livewire.js?id=af0b760a:3191
(anonymous) @ livewire.js?id=af0b760a:3128
VM18515:3  The above error occurred in the <Au> component:

    at Au (<anonymous>:8:256385)
    at $c (<anonymous>:8:245728)
    at div
    at iu (<anonymous>:8:249459)
    at $c (<anonymous>:8:245728)
    at div
    at section
    at tu (<anonymous>:8:248911)
    at div
    at Hf (<anonymous>:8:282145)
    at Vf (<anonymous>:8:283024)
    at div
    at $c (<anonymous>:8:245728)
    at Xf (<anonymous>:8:285234)
    at section
    at Xy (<anonymous>:8:412946)
    at main
    at ye (<anonymous>:3:307458)
    at Se (<anonymous>:3:308678)
    at $c (<anonymous>:8:245728)
    at Jy (<anonymous>:8:417349)

React will try to recreate this component tree from scratch using the error boundary you provided, $c.
Rp @ VM18515:3
r.payload @ VM18515:3
Lc @ VM18515:3
_c @ VM18515:3
(anonymous) @ VM18515:3
$d @ VM18515:3
yp @ VM18515:3
Ih @ VM18515:3
uh @ VM18515:3
sh @ VM18515:3
lh @ VM18515:3
Xm @ VM18515:3
Vm @ VM18515:3
wg @ VM18515:3
(anonymous) @ VM18515:3
Km @ VM18515:3
Kg @ VM18515:3
t.render @ VM18515:3
window.ignite @ VM18515:8
(anonymous) @ VM18516:2
showHtmlModal @ livewire.js?id=af0b760a:445
showFailureModal @ livewire.js?id=af0b760a:599
(anonymous) @ livewire.js?id=af0b760a:558
await in (anonymous) (asynchron)
queueNewRequestAttemptsWhile @ livewire.js?id=af0b760a:614
sendRequestToServer @ livewire.js?id=af0b760a:508
(anonymous) @ livewire.js?id=af0b760a:494
(anonymous) @ livewire.js?id=af0b760a:502
setTimeout (asynchron)
bundleMultipleRequestsTogetherIfTheyHappenWithinFiveMsOfEachOther @ livewire.js?id=af0b760a:501
triggerSend @ livewire.js?id=af0b760a:493
(anonymous) @ livewire.js?id=af0b760a:651
(anonymous) @ livewire.js?id=af0b760a:608
waitUntilTheCurrentRequestIsFinished @ livewire.js?id=af0b760a:604
requestCall @ livewire.js?id=af0b760a:649
(anonymous) @ livewire.js?id=af0b760a:4177
eval @ VM18512:3
(anonymous) @ livewire.js?id=af0b760a:1321
tryCatch @ livewire.js?id=af0b760a:1245
evaluate @ livewire.js?id=af0b760a:1269
(anonymous) @ livewire.js?id=af0b760a:7064
callAndClearComponentDebounces @ livewire.js?id=af0b760a:7050
x-on:click @ livewire.js?id=af0b760a:7063
(anonymous) @ livewire.js?id=af0b760a:1289
tryCatch @ livewire.js?id=af0b760a:1245
(anonymous) @ livewire.js?id=af0b760a:3752
handler4 @ livewire.js?id=af0b760a:3126
(anonymous) @ livewire.js?id=af0b760a:3191
(anonymous) @ livewire.js?id=af0b760a:3128
[Violation]Forced reflow while executing JavaScript took 38ms
VM18517 client:229 [vite] connecting...
VM18517 client:324 [vite] connected.

clicking on the first few livewire.js links the error points to the line: " let response = await fetch(updateUri, options);" <--failed to load resource: the server responded with a status of 500 (Internal Server Error)

There actual error displayed on screen points to the main public/index.php file. With error "Class name must be a valid object or string", refering to the line: $response = $kernel->handle(... Here is a snippet of the error that is displayed (tokens edited):

Headers
host
mbp.test

connection
keep-alive

content-length
1090

user-agent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

content-type
application/json

accept
*/*

origin
http://mbp.test

referer
http://mbp.test/seminar/28

accept-encoding
gzip, deflate

accept-language
de,de-DE;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

cookie
remember_web_59brandomcookietokenherexxxxxxxxxxxxxxxxxxxxx; bildungspass_session=eyJTokenkeyherexxxxxxxxxxxxxxxxxxxxxxxxxx

Body
{
    "_token": "tokenherexxxxxxxxxxxxxxxxxxxx",
    "components": [
        {
            "snapshot": "{\"data\":{\"seminarid\":28,\"seminar\":[[],{\"key\":28,\"class\":\"App\\Models\\Seminar\",\"relations\":[\"attendance\"],\"s\":\"elmdl\"}],\"userBookings\":[[],{\"keys\":[],\"class\":\"Illuminate\\Database\\Eloquent\\Collection\",\"modelClass\":null,\"s\":\"elcl\"}],\"hasstarted\":false,\"hasended\":false,\"bookingdatepassed\":false,\"forchildren\":false,\"seminarstatus\":1,\"ageRanges\":[[],{\"keys\":[1,2,3,4,5,6],\"class\":\"Illuminate\\Database\\Eloquent\\Collection\",\"modelClass\":\"App\\Models\\AgeRange\",\"s\":\"elcl\"}],\"selectedAges\":[[\"\"],{\"s\":\"arr\"}],\"userprofile\":[[],{\"key\":3,\"class\":\"App\\Models\\UserProfiles\",\"s\":\"elmdl\"}]},\"memo\":{\"id\":\"ZUrNzZeditedEnC\",\"name\":\"bookings.details\",\"path\":\"seminar\/28\",\"method\":\"GET\",\"children\":[],\"errors\":[],\"locale\":3},\"checksum\":\"990411a1ad0e35159editedhere2e5862d82233670ef9\"}",
            "updates": [],
            "calls": [
                {
                    "path": "",
                    "method": "tester",
                    "params": []
                }
            ]
        }
    ]
}

APP
Routing
Controller
Livewire\Mechanisms\HandleRequests\HandleRequests@handleUpdate

Route name
livewire.update

Middleware
web

LIVEWIRE
Component
Component

Alias

ID

Updates
Something went wrong in Ignition!
An error occurred in Ignition's UI. Please open an issue on [the Ignition GitHub repo] and make sure to include any errors or warnings in the developer c...........

I suspect this is something to do with the Laravel update rather than the Livewire update. But I don't know what or where. I'm really stuck. Can anyone help?

Additional: General Livewire components using form submits work fine. the issue is with button "wire:click" events.

0 likes
5 replies
jimbocity's avatar

@Nakov yes, everything step by step. I reverted to 'legacy_model_binding' => true' for my bindings on some of the pages. But that doesn't have any relation to the wire:click issue. Everything else I followed exactly as requested

jaseofspades88's avatar

Is it possible any of the upgrade steps weren't performed correctly?

jimbocity's avatar

@jaseofspades88 no I don't think so. I read it all first and then performed it step by step. I've since gone back and double-check and I can't see anything I've missed or done incorrectly. The fact that it's only wire:click that doesn't work and nothing else makes me think something has corrupted perhaps?

jaseofspades88's avatar

I highly doubt of any corruption, @jimbocity. It's easy when having done a big piece of work to not be able to see the wood for the trees. Check the really obvious things, single closing root elements, that sort of stuff.. sometimes it's just the obvious stuff that isn't so obvious when you've been gawping at it for a while....

Please or to participate in this conversation.