Issues implimenting Broadcasting with pusher

I am using laravel 5.2, and implimenting real time notification when a task is completed. I have one event and one listeners. My end goal is to show a javascript alert on the page when the event gets pushed.

App\Events\User\App\Trigger\MarkTopicComplete.php

class MarkTopicComplete extends Event implements ShouldBroadcast{
...
public function broadcastWith(){
    return [
            'user_id' => $this->user_id,
            'topic_id' => $this->topic_id
    ];
}

public function broadcastOn(){
    return ['topic-complete'];
}

App\Listeners\User\App\Trigger\MarkTopicComplete\LogActivity

public function handle(MarkTopicComplete $event){
        $this->user_id = $event->user_id;
        $this->user_email = $event->user_email;
        $this->topic_id = $event->topic_id;
        Log::info('User '.$this->user_email.' has completed the TOPIC ID: '. $this->topic_id);
    }

Front End

<script src="//js.pusher.com/3.2/pusher.min.js"></script>
<script>
var pusher = new Pusher('', {
  encrypted: true
});
Pusher.logToConsole = true;

var channel = pusher.subscribe('topic-complete');

channel.bind('App\\Events\\User\\App\\TriggerMarkTopicComplete', function(data) {
  // Over here i would like to alert the frontend with the topic id that is sent from the event.
  alert(data.topic_id);
});
</script>

This is what i am recieving in my CONSOLE:

Pusher : State changed : connecting -> connected with new socket ID 204817.3725229
pusher.min.js:8 Pusher : Event sent : {"event":"pusher:subscribe","data":{"channel":"topic-complete"}}
1?session=OTk2NDUyOTMx&bundle=MQ%3D%3D&key=ODY4MTU1MjE4NWU0ZjFkYzY0YTI%3D&lib=anM%3D&version=My4yLj…:1 Uncaught TypeError: Pusher.ScriptReceivers[1] is not a function(anonymous function) @ 1?session=OTk2NDUyOTMx&bundle=MQ%3D%3D&key=ODY4MTU1MjE4NWU0ZjFkYzY0YTI%3D&lib=anM%3D&version=My4yLj…:1
pusher.min.js:8 Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"topic-complete"}
pusher.min.js:8 Pusher : No callbacks on topic-complete for pusher:subscription_succeeded
pusher.min.js:8 Pusher : Event recd : {"event":"App\\Events\\User\\EstudyAcademy\\Trigger\\MarkTopicComplete","data":{"user_id":1,"topic_id":2},"channel":"topic-complete"}
pusher.min.js:8 Pusher : No callbacks on topic-complete for App\Events\User\EstudyAcademy\Trigger\MarkTopicComplete

As you can see i do recieve "data":{"user_id":1,"topic_id":2} but some how i cant do something like alert(data.user_id); I think this might be because of this error Uncaught TypeError: Pusher.ScriptReceivers[1] is not a function

Any help would be appreciated :)

via Chebli Mohamed