Livewire v3: morphing more complex component tree: Block.get children(): currentNode can be null

[levu42]

I'm using Livewire 3 on a big codebase that I've upgraded a few betas ago to Livewire v3, and now I ran into a bug when updating a bit more complex component tree. I was unfortunately not able to make a reproducable test case as a bug report, but I found a JS fix inside alpine that fixes the issue:

In

alpine/packages/morph/src/morph.js

Line 406 in 5506b5c

while (currentNode !== undefined && currentNode !== this.endComment) {

I run into the situation that currentNode is null, but not undefined.

Changing the condition from currentNode !== undefined to currentNode !== undefined && currentNode !== null fixed the problem for me.

I don't fully understand what's happening here, but I would love to have that fix upstream, so I don't need to bugfix my livewire.esm.js on every Livewire / alpine update ;)

[levu42]

PS: The error I was originally getting was that it couldn't read nextSibling on null, so that might be the error message other people might get.

[ekwoka]

Probably better to just do

while (currentNode && currentNode !== this.endComment) {

This is definitely a place that typescript would have prevented this issue.

[levu42]

@ekwoka yes, nicer solution!

[levu42]

PR with a fix: #3729

[NickBourque]

This just cropped up for me as well - looking forward to seeing this fix getting merged!

[sawirricardo]

Any chance you have a fork for this to be fixed with livewire?

[emincer]

Seeing the same Uncaught TypeError: Cannot read properties of null (reading 'nextSibling') down stream into LiveWIre 3 and Filament 3. Roadblocked, so hoping for a fix.

[joshhanley]

@levu42 the issue was actually to do with the morph markers creating mis-formed html when using the @forelse/ @empty directives. This has been fixed in PR livewire/livewire#6522 and released in Livewire 3.0.1.

[ekwoka]

Seems valuable to fix the type safety issue regardless.

[joshhanley]

@ekwoka yeah fair

[levu42]

@joshhanley Thanks! Livewire 3.0.1 fixed it for me :)

[elchibek1]

Thanks man! You are awesome

[joydeep-bhowmik]

same problem still not fixed...
this issue is occurring with @forelse/ @empty directive

[joshhanley]

@joydeep-bhowmik what patch version of Livewire are you using? Also can you provide some example code that demonstrates the issue so we can investigate? Thanks!

[NickBourque]

@joydeep-bhowmik Livewire ^3.0.1 fixed it for me. If you're still running 3.0.0 try upgrading.

[joydeep-bhowmik]

that might be the case .... can u please tell how to upgrade

[NickBourque]

composer require livewire/livewire:^3.0.1

[joydeep-bhowmik]

thanks