TheECGaming's avatar

Issue with Livewire 3, Alpine, Echo, and Reverb

I'm using Livewire 3, Echo, Alpine, Reverb, and TallStackUI (TallstackUI isn't the issue).

My Alpine/Livewire is setup in my app.js:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import collapse from '@alpinejs/collapse'
import './bootstrap'


Alpine.plugin(collapse)

Livewire.start()

In my bootstrap, I call my echo.js, like is done with installing broadcast:

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allow your team to quickly build robust real-time web applications.
 */

import './echo';

And then in my Echo:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

So with this, I created a Livewire component called IsLiveButton:

<?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class IsLiveButton extends Component
{
    public $isLive = false;

    public function mount()
    {
        $this->isLive = cache()->get('twitch_live', false);
    }

    public function liveUpdate($event)
    {
        $this->isLive = $event['live'];
    }

    public function getListeners()
    {
        return [
            'echo:gamers-is-live' => 'liveUpdate',
        ];
    }



    public function render()
    {
        return view('livewire.is-live-button');
    }
}

And then the view:

<div>
    @if($isLive)
        <x-button icon="video-camera" class="animate-pulse" color="primary" sm>Live</x-button>
    @else
        <x-button icon="video-camera-slash" color="secondary" sm>Not Live</x-button>
    @endif
</div>

Now what I've noticed, is when I remove my echo.js my alpine works, and when I remove the On attribute, it works, but when I don't, Alpine stops working, and I get the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'charAt') - laravel-echo.js?v=a8cf025b:164

I do have my livewire in my layout loaded using @livewireScriptConfig. With Echo being used, whether Reverb can be accessed or not, I get this error in both production and local, and have tested on a forge server. I cannot seem to find the issue, so I figured I'd ask for help on why I'm getting this error.

This error stops all my alpine data, from dropdowns to my theme-switch (Which is a TallStackUI switch).

0 likes
0 replies

Please or to participate in this conversation.