Laravel Echo - Uncaught TypeError: Невозможно прочитать свойство 'channel' из неопределенного

Я пытаюсь заставить laravel echo работать в моем приложении, и после проверки каждого уголка в моем коде я не нахожу возможную проблему, вызывающую указанную ошибку. Очевидно, что проблема заключается в импорте Echo, который я проверил.
Я показываю вам мой код:

$(document).ready(function(){

  var parte_id = $('#form_mensajes input[name=parte_id]').val();
  
  window.Echo.channel('parte_' + parte_id).listen('NuevoMensaje', (mensaje) => {
    var msg = '';
    if(mensaje.origen == 'proveedor'){
      msg += "<div class='derecha'>"  +  mensaje.cuerpo +  " <br><small>"+ mensaje.created_at +"</small></div>";
    } else if(mensaje.origen == 'gestor'){
      msg += "<div class='izquierda'>"  +  mensaje.cuerpo +  " <br><small>"+ mensaje.created_at +"</small></div>";
    }

    $('#caja_mensajes').append(msg);
    var d = $('#caja_mensajes');
    d.scrollTop(d.prop("scrollHeight"));
  
  });

});

В файле bootstrap.js у меня есть следующий код

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
     broadcaster: 'pusher',
     key: 'xxxxxxxxxxxxxxxxxx',
     cluster: 'eu',
     encrypted: true
});

Я следил за каждым шагом, показанным на сайте Laravel
Я сделал, композитор требует pusher/pusher-php-сервер "~3.0"
Я проверил все данные отправителя (app_id, ключ, секрет, кластер)
Я установил pusher-js и laravel-echo, выполнив npm install --save laravel-echo pusher-js
Я сделал Npm Run Dev

Мой Event Event в Laravel выглядит так

class NuevoMensaje implements ShouldBroadcastNow{
    
    use Dispatchable, InteractsWithSockets, SerializesModels;
  
    public $mensaje;
   
    public function __construct(Mensaje $mensaje)
    {
        $this->mensaje = $mensaje;
    }
    
    public function broadcastOn()
    {
        return new Channel('parte_'.$this->mensaje->parte_id);
    }

    public function broadcastWith(){
        return [
            'cuerpo' => $this->mensaje->cuerpo,
            'created_at' => $this->mensaje->created_at,
            'origen' => $this->mensaje->origen,
        ];
    }
}

И мой контроллер

class MensajeController extends Controller
{
    public function store(Request $request)
    {
        $mensaje = new Mensaje;
        $mensaje->cuerpo = $request->cuerpo;
        $mensaje->origen = $request->origen;
        $mensaje->parte_id = $request->parte_id;
        $mensaje->save();

        broadcast(new NuevoMensaje($mensaje))->toOthers();
        
        return $mensaje->toJson();
    }


}

Когда я захожу на страницу и проверяю консоль, я вижу следующее сообщение:
введите описание изображения здесь

Если честно, я не знаю, что еще проверить. Я знаю, что это довольно сложный диагноз, но я надеюсь, что любой из вас сможет помочь, дав мне единственную подсказку. Я был бы очень благодарен.

Что касается комментария engrhussainahmad, я приложил фрагмент, который вы можете найти в моем public/js/app.js, который с моей точки зрения демонстрирует, что код bootstrap.js правильно компилируется в ES5

window.Pusher = __webpack_require__(36);

window.Echo = new __WEBPACK_IMPORTED_MODULE_0_laravel_echo___default.a({
  broadcaster: 'pusher',
  key: '8fc5e86877eaec2b7244',
  cluster: 'eu',
  encrypted: true
});

Источник

2 ответа

Я нашел решение, забыв jQuery и выполнив его с помощью Vuejs. Очевидно, мне не хватает чего-то, что мешает мне использовать jQuery и laravel Echo - Pusher. С Vuejs работает нормально.

Источник

Куда вы добавляете следующий код:

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxx',
    cluster: 'eu',
    encrypted: true
})

Если вы попробуете этот код в отдельном файле. Ваша проблема будет исправлена, я также столкнулся с такой проблемой, которую я исправил таким образом.

Источник
Другие вопросы по тегам