Laravel Echo - Uncaught TypeError: Cannot read property 'channel' of undefined

Question

I'm trying to get laravel echo to work in my app and after checking every nook in my code I don't find the possible problem that is causing the referenced error. Obviously it's about of a problem by importing Echo which I have checked.
I show you my code:

$(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"));
  
  });

});

In the bootstrap.js file I have the following code

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

I have followed every single step shown in the laravel site
I have done composer require pusher/pusher-php-server "~3.0"
I have checked all pusher data (app_id, key, secret, cluster)
I have installed pusher-js and laravel-echo by doing npm install --save laravel-echo pusher-js
I did npm run dev

My Event Class in laravel looks like that

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,
        ];
    }
}

And my controller

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();
    }


}

When I enter the page and check the console I see the following message:
enter image description here

To be honest, I do not know what else to check. I know this have a quite difficult diagnosis but i hope any of you can help by giving me a single clue. I'd be really greatful.

Regarding the comment of engrhussainahmad, I attached the snippet that you can find in my public/js/app.js that from my point of view demonstrate that the bootstrap.js code is correctly compile into 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
});

Answer 1

I found a solution by forgetting jQuery and doing it with Vuejs. Obviously I'm missing something that prevents me from using jQuery and laravel Echo - Pusher. With Vuejs works fine.

Answer 2

Where are you adding the below code:

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

If you try this code in a separate file. Your issue will be fixed, I also faced this type of issue which I have fixed that way.