Creating 3 Alpine components results with "Alpine Expression Error: ... is not defined"

So I am creating a comments section for my web app, and when there is a fresh post with no comments, creating 2 comments is fine. But when I create the third comment, the first created comment (which is an alpine component that has showReplies boolean and repyForm boolean) when I try to use the buttons on that component it does not respond. Once I finally create another comment (fourth one) I get this error in the console:

Alpine Expression Error: replyForm is not defined
Expression: "replyForm"
Alpine Expression Error: showReplies is not defined
Expression: "showReplies"

I think, alpinejs can not follow all these comment blade components and results in this. Also, if I refresh the page everything works again just fine. And error never happens again since there are comments. The error occurs when there is a fresh post with no comments, and if the user adds 4 continuous comments without refreshing the page.

here is the code:

<div>
    @foreach ($comments as $comment)
        <div wire:key="{{ $comment->id }}" 
        x-data="{
            showReplies: {{ $comment->depth }} < 2 ? true : false,
            replyForm: false,
        }"> 
        </div>
    @endforeach
</div>

ramonrietdijk

1 year ago

Level 30

Are you, by any chance, bundling Alpine.js manually? Make sure to not start Alpine twice, as that may cause strange behavior.

You only need to start Livewire:

Livewire.start()

yehuuu6

1 year ago

Level 2

@ramonrietdijk no I do not do such thing I dont even know where to put this code

yehuuu6

1 year ago

Best Answer

Level 2

I have just fixed the problem with a single thing and I have no idea why. But here is the solution

<div>
    @foreach ($comments as $comment)
        <div> // Adding this extra div wrapper to the actual comment element fixed the problem!!!
            <div wire:key="{{ $comment->id }}" x-data="{
                showReplies: {{ $comment->depth }} < 2 ? true : false,
                replyForm: false,
            }">
            </div>
        </div>
    @endforeach
</div>

yehuuu6

1 year ago

Level 2

Adding the wire:key attribute to the parent div causes this problem but I don't now why. So adding another empty div before the wire:key fixed the problem for me.

Please or to participate in this conversation.