Pusher is not defined! Laravel 5.4 with Laravel Echo

Question

I don't know what is wrong with my codes

Here's my app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('chat-message', require('./components/ChatMessage.vue'));
Vue.component('chat-log', require('./components/ChatLog.vue'));
Vue.component('chat-composer', require('./components/ChatComposer.vue'));

let idIsExist = document.getElementById('chat-init');

if(idIsExist !== null) {
    const app = new Vue({
        el: '#chat-init',
        http: {
            emulateJSON: true,
            emulateHTTP: true
        },
        data: {
            messages: []
        },
        methods: {
            addMessage(message) {
                axios.post('page-send-message', message).then(response => {
                    if(response.status !== 200) {
                        message = {
                            messages: response.statusText,
                            user: {
                                name: response.status
                            }
                        }
                    }
                    return this.messages.push(message);
                });
            }
        },
        created() {
            axios.get('page-messages').then(response => {
                this.messages = response.data;
            });

            Echo.join('page-chat').here().joining().leaving().listen('MessagePosted', e => {
                console.log(e);
            });
        }
    });
}

Here's my `bootstrap.js` 

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

// Laravel Global Variable to use Laravel.csrfToken
let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', csrfToken);
    next();
});

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

Here's my bootstrap.js

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '3c45e6945c69f616f4a3'
});

Here's my Event MessagePosted.php

<?php

namespace App\Events;

use App\User;
use App\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessagePosted implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     *
     * @var Message
     *
     */

    public $message;

    /**
     *
     * @var User
     *
     */

    public $user;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message, User $user)
    {
        $this->message = $message;
        $this->user = $user;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PresenceChannel('page-chat');
    }
}

After that set up I got this error in my console

Uncaught ReferenceError: Pusher is not defined
    at PusherConnector.connect (eval at <anonymous> (app.js:345), <anonymous>:546:31)
    at PusherConnector.Connector (eval at <anonymous> (app.js:345), <anonymous>:192:14)
    at new PusherConnector (eval at <anonymous> (app.js:345), <anonymous>:537:135)
    at new Echo (eval at <anonymous> (app.js:345), <anonymous>:689:30)
    at eval (eval at <anonymous> (app.js:145), <anonymous>:59:15)
    at Object.<anonymous> (app.js:145)
    at __webpack_require__ (app.js:20)
    at eval (eval at <anonymous> (app.js:418), <anonymous>:8:1)
    at Object.<anonymous> (app.js:418)
    at __webpack_require__ (app.js:20)

I already install the Independencies

composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

Can you help how to solve my problem. the problem is Pusher is not defined, I don't know why.

Answer 1

Add in your bootstrap.js file this

import Pusher from "pusher-js"

This error is due to a change in laravel, more information here https://github.com/laravel/echo/pull/110