Laravel Echo "Echo is not defined"

user_9118486 0
Viewed 9225

First of all thanks for reading. Let me explain the problem that I'm facing. So I installed Pusher and Laravel Echo successfully and tried to use it in my dash.blade.php, this is how I imported the app.js file: <script src="{{ asset('js/app')}}"></script>. After that I used this: 

<script>
  Echo.channel('channelDemoEvent')
    .listen('eventTrigger', (e) => {
      alert('Its working');
    });
</script>

And when running it I get this error in chrome console: Uncaught ReferenceError: Echo is not defined

I searched on the internet for this error more than 2 hours now, and when I added window. before the Echo I got a different error, that error is this: Uncaught TypeError: Cannot read property 'channel' of undefined I have tried to comment these on the app.js because I read that that could make this error: Vue.component('example-component', require('./components/ExampleComponent.vue')); window.Vue = require('vue'); 

const app = new Vue({
el: '#app',
});`

After commenting those I get the same error. Thanks for reading & have a nice day.

pusher laravel echo
4 Answers

Here are the steps

composer

Install pusher if you are using pusher 

composer require pusher/pusher-php-server "~4.0"

NPM or Yarn

npm install --save laravel-echo pusher-js

If not using pusher then 

npm install --save socket.io-client

Blade

Make sure that your template has csrf token like so 

<meta name="csrf-token" content="{{ csrf_token() }}">

.env

In .env you should fill in your pusher information 

PUSHER_APP_ID=yourpusherappid
PUSHER_APP_KEY=yourpusherappkey
PUSHER_APP_SECRET=yourpusherappsecret
PUSHER_APP_CLUSTER=yourpusherappcluster

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

webpack.mix.js

In webpack.mix.js

Make sure you have 

const mix = require("laravel-mix");
require("dotenv").config();

bootstrap.js

In resources/js/bootstrap.js

Make sure you have uncommented 

/**
 * 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.Pusher = require("pusher-js");

window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

Compile

Don't forget to recompile your js files 

NPM run watch 
NPM run dev 
NPM run prod

Config Cache

Sometimes you may need to clear the cache so that changes take effect run the following command 

php artisan config:clear

Thanks for upvote

user_24762380

Here are some things you can check/do that might resolve your issue:

  • Make sure that you have uncommented these lines in bootstrap.js

bootstrap.js 

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

  • Did you run npm run dev, npm run prod or npm run watch after making your changes?

  • I am not confident with your js importation. asset('js/app') will return http://localhost/js/app. You probably have to add .js at the end to have everything imported properly.

  • Check that your js/app.js importation is positioned before your <script></script> tag.

user_58984960

Please follow the below sequence of code

  1. first set window variable
  2. second config vue
window.Echo = new Echo({
  broadcaster: 'socket.io',
  host: 'http://127.0.0.1:6001'
})
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
`
user_146918290

I have used Laravel echo in pure JS and that happened because document wasn't loaded.

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        Echo.listen(...);
    }
}
user_58274770
Related