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

vipulsinha's avatar

Livewire chat in laravel

I am developing a real-time chat app in Laravel using livewire but right now I am getting lots of errors in my console.

Error 1: Uncaught TypeError: Cannot redefine property: $persist at Function.defineProperty () Error 2: Uncaught TypeError: Cannot read properties of null (reading 'trim') at [Alpine] !body.trim

Warning 1: alpinejs.js?v=6590553d:424 Alpine Expression Error: Cannot read properties of null (reading 'trim')

Expression: "!body.trim()

My code is: chat-box.blade.php

            <input type="hidden" autocomplete="false" style="display:none">

            <div class="grid grid-cols-12">
                 <input 
                        x-model="body"
                        type="text"
                        autocomplete="off"
                        autofocus
                        placeholder="write your message here"
                        maxlength="1700"
                        class="col-span-10 bg-gray-100 border-0 outline-0 focus:border-0 focus:ring-0 hover:ring-0 rounded-lg  focus:outline-none"
                 >

                 <button x-bind:disabled="!body.trim()"  class="col-span-2" type='submit'>Send</button>

            </div>

        </form>

ChatBox.php

class ChatBox extends Component { public $selectedConversation; public $body; public $loadedMessages;

public $paginate_var = 10;

protected $listeners = [
    'loadMore'
];
.
.
.
.
public function sendMessage()
{
    $this->validate(['body' => 'required|string']);

    $createdMessage = Message::create([
        'conversation_id' => $this->selectedConversation->id,
        'sender_id' => auth()->id(),
        'receiver_id' => $this->selectedConversation->getReceiver()->id,
        'body' => $this->body

    ]);


    $this->reset('body');

    #scroll to bottom
    $this->dispatch('scroll-bottom');


    #push the message
    $this->loadedMessages->push($createdMessage);


    #update conversation model
    $this->selectedConversation->updated_at = now();
    $this->selectedConversation->save();


    #refresh chatlist
    $this->dispatch('chat.chat-list', 'refresh');

    #broadcast

    $this->selectedConversation->getReceiver()
        ->notify(new MessageSent(
            Auth()->User(),
            $createdMessage,
            $this->selectedConversation,
            $this->selectedConversation->getReceiver()->id

        ));
}

Can anyone please help me out in this?

0 likes
2 replies
aleahy's avatar

Your blade view looks like it's just using alpine components and not relating to the livewire component at all.

You need to keep in mind that the variables from the livewire component are being rendered on the server before it is sent back. So to access the livewire component's $body variable, you should wire it up with wire:model="body" and when you refer to it in other locations, you need to be using php, such as {{ trim($blade) }}.

Snapey's avatar

make sure you are not separately loading alpine.js as Livewire will load it also

Please or to participate in this conversation.