this.endComment is null

[TerrePorter]

Livewire version

v3.0.3

Which PHP version are you using?

PHP 8.1

Repository URL

No response

Steps To Reproduce

I have trimmed down my page that I was having the error on to this very basic example. I created a test route and livewire component loading template.

Route::get('/testarray', function () {
    return view('testarray_index');
});

Testarray_index.blade.php

@extends('layouts.app')

@section('content')
    <div>
        @livewire('test-array')
    </div>
@endsection

That extends the layout which loads the livewire scripts. I am not using the autoload feature for livewire so I have the @livewireStyles and @livewireScripts tags in the layout file.

The test livewire component template.

<div>
    <div >
        <button wire:click="dotest">TEST</button>
    </div>
    <div class="p-4">
        @foreach($myRandomNamesData as $randomName)
           <p>
                @if ($randomName[1])
                    <a class="underline">
                        {{ $randomName[0] }}
                    </a>
                @else
                    <div>
                        {{ $randomName[0] }}
                    </div>
                @endif
            </p>
        @endforeach
    </p>
</div>

The test livewire component code.

<?php

namespace App\Livewire;

use Livewire\Component;

class TestArray extends Component
{
    public $myRandomNamesData;

    public function dotest() {
        $this->makeArray();
    }

    public function makeArray() {

        $myRandomNamesData = [];

        $myRandomNamesData[] = [
            'TEST ' . rand(1,100),
            rand(0,1)
        ];

        $myRandomNamesData[] = [
            'TEST ' . rand(1,100),
            rand(0,1)
        ];

        $myRandomNamesData[] = [
            'TEST ' . rand(1,100),
            rand(0,1)
        ];

        $myRandomNamesData[] = [
            'TEST ' . rand(1,100),
            rand(0,1)
        ];

        $this->myRandomNamesData = $myRandomNamesData;
    }

    public function render()
    {
        $this->makeArray();
        return view('livewire.test-array');
    }
}

The process is simply. Load the route and the data is loaded and displayed. Click the test button and the random data is reloaded and displayed.

The issue is when the page is reloaded after clicking the button an error message occurs.

Uncaught TypeError: this.endComment is null  livewire.js:6446:7

This only happens with the exact structure of template. If I change or remove the P tag the error does not happen. If I change or remove the A tag the error does not happen. Changes to the div tag in the foreach does not appear to make any difference. It only is the P tag and A tag that have an effect on the outcome.

Hope that helps reproduce the issue.

Additional information

No response

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be removed if I haven't met the criteria above.

[MichaelPote]

I've also encountered this bug. For me I had the following:

		    @foreach($students as $student)
				@if (!empty($student->room_bed))
					    @continue
				@endif
						..... HTML .....
		    @endforeach

And when re-rendering the page after a change I would get this.endComment is null and Livewire would try to do masses of AJAX calls.
I fixed it by removing the @continue and inlining the test:

		    @foreach($students->filter(fn($student) => empty($student->room_bed)) as $student)
					.... HTML....
		    @endforeach

[DanielGSoftware]

This fixed it for us as well. Thanks!

[calebporzio]

Hmm. this probably has to do with Livewire's morph marker injection stuff.

Try disabling it in your livewire.php config:

If you set that to false, this might fix the problem.

Report back either way though

[DanielGSoftware]

Hi @calebporzio, not my thread, but the solution provided by @MichaelPote worked for us. When I disabled inject_morph_markers, it didn't fix it for us. However, in our specific case we had @continue in our code.

[A1exMiranda]

This actually fixed my error, thank you so much!

[joshhanley]

@DanielGSoftware ah interesting, looks like the morph markers should also be added for when @continue is used, as it's likely not allowing the morph markers to "finish" correctly as it would at the end of the loop. Any chance you could submit a failing test PR?

[montes]

Thanks! This also solved a similar problem for me (maybe you'll need a view:clear after updating the config)

[chris-arated]

This fixed it for me, only after view:clear (thanks @montes)

I'm still not sure why this started happening, I haven't changed a lot but the error was coming up when sorting my data table and rows were disappearing.

[Ahrengot]

I encountered the same issue when i was conditionally rendering a slot in a nested blade component.

Turning off morph makers didn't fix it.

What I had before:

<x-table>
    <x-slot:body>
        ...
    </x-slot:body>

    @if ($fuel->isNotEmpty())
        <x-slot:footer>
            <x-table.row class="border-t">
                ...
            </x-table.row>
        </x-slot:footer>
    @endif
</x-table>

The fix

<x-table>
    <x-slot:body>
        ...
    </x-slot:body>

    <x-slot:footer>
        <x-table.row @class(['border-t', 'hidden' => $fuel->isEmpty()])>
            ...
        </x-table.row>
    </x-slot:footer>
</x-table>

[joshhanley]

@Ahrengot ah yeah the morph markers wouldn't know where to put the conditional markers as the slot spot in the blade component is different to where it's rendered in the parent. I would probably just put the conditional inside the slot.

<x-table>
    <x-slot:body>
        ...
    </x-slot:body>

    <x-slot:footer>
        @if ($fuel->isNotEmpty())
            <x-table.row class="border-t">
                ...
            </x-table.row>
         @endif
    </x-slot:footer>
</x-table>

[OmeBlues]

Also encountered this. I wanted to add a comma to list of (linked) authors but not on the last one. The comma was just added as is, encapsulating it inside a did the trick for me.

[colbyalbo]

I also ran into this. I had 2 blade foreach loops in the same DIV element.
Putting each blade loop inside its own DIV remedied the error.

php 8.3
Laravel 11.7.0
Livewire 3.4.12