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).
Please or to participate in this conversation.