Laravel echo TypeError: Cannot read properties of undefined (reading 'channel'). В чем проблема?

Question

[Sasha_212]

Я использую Laravel для бэкэнда и Vue для фронтенда. Я также использую Vite в качестве упаковщика и эха laravel для трансляции. Я пытаюсь создать веб-сокет, чтобы показывать новые добавленные комментарии в режиме реального времени.

это функция трансляции в моем app.vue:

listenForNewComments() {
            window.Echo.channel('comments')
                .listen('CommentCreated', (e) => {
                    this.newComments.push(e.comment);
                });
        }

В моем файле .env я настроил информацию о пушере для vite:

VITE_PUSHER_APP_ID=1816356
VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST=
VITE_PUSHER_APP_SECRET="${PUSHER_APP_SECRET}"
VITE_PUSHER_PORT=443
VITE_PUSHER_SCHEME=https
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Мой bootstrap.js:

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

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

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true,
    encrypted: true,
});

channels.php:

Broadcast::channel('comments', function () {
    return true;
});

И ивент `CommentCreated.php'

class CommentCreated implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $comment;

    public function __construct(Comment $comment)
    {
        $this->comment = $comment;
    }

    public function broadcastOn()
    {
        return new Channel('comments');
    }
}

Очевидно, я что-то упускаю и целый день пытался найти решение. Функцию «listenForNewComments» я получил от chatGPT и уверен, что там допущена ошибка, но не могу ее найти. Я нашел ту же проблему Здесь, но создатель треда даже не объяснил свое решение