title: Pusher is not defined! Laravel 5.4 with Laravel Echo
body: <p>I don't know what is wrong with my codes</p>
  
  <p>Here's my <code>app.js</code></p>
  
  <pre><code>/**
   * 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 =&gt; {
                      if(response.status !== 200) {
                          message = {
                              messages: response.statusText,
                              user: {
                                  name: response.status
                              }
                          }
                      }
                      return this.messages.push(message);
                  });
              }
          },
          created() {
              axios.get('page-messages').then(response =&gt; {
                  this.messages = response.data;
              });
  
              Echo.join('page-chat').here().joining().leaving().listen('MessagePosted', e =&gt; {
                  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) =&gt; {
      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'
  };
  </code></pre>
  
  <p>Here's my <code>bootstrap.js</code></p>
  
  <pre><code>/**
   * 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'
  });
  </code></pre>
  
  <p>Here's my Event <code>MessagePosted.php</code></p>
  
  <pre><code>&lt;?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-&gt;message = $message;
          $this-&gt;user = $user;
      }
  
      /**
       * Get the channels the event should broadcast on.
       *
       * @return Channel|array
       */
      public function broadcastOn()
      {
          return new PresenceChannel('page-chat');
      }
  }
  </code></pre>
  
  <p>After that set up I got this error in my console</p>
  
  <pre><code>Uncaught ReferenceError: Pusher is not defined
      at PusherConnector.connect (eval at &lt;anonymous&gt; (app.js:345), &lt;anonymous&gt;:546:31)
      at PusherConnector.Connector (eval at &lt;anonymous&gt; (app.js:345), &lt;anonymous&gt;:192:14)
      at new PusherConnector (eval at &lt;anonymous&gt; (app.js:345), &lt;anonymous&gt;:537:135)
      at new Echo (eval at &lt;anonymous&gt; (app.js:345), &lt;anonymous&gt;:689:30)
      at eval (eval at &lt;anonymous&gt; (app.js:145), &lt;anonymous&gt;:59:15)
      at Object.&lt;anonymous&gt; (app.js:145)
      at __webpack_require__ (app.js:20)
      at eval (eval at &lt;anonymous&gt; (app.js:418), &lt;anonymous&gt;:8:1)
      at Object.&lt;anonymous&gt; (app.js:418)
      at __webpack_require__ (app.js:20)
  </code></pre>
  
  <p>I already install the Independencies </p>
  
  <pre><code>composer require pusher/pusher-php-server
  npm install --save laravel-echo pusher-js
  </code></pre>
  
  <p>Can you help how to solve my problem. the problem is Pusher is not defined, I don't know why.</p>