Laravel Echo "Echo is not defined" - laravel

Question

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.

Answer 1

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

Answer 2

For me the problem was in loading Echo Script before initialization,
So i had to make the listener start after the whole page is loaded
window.addEventListener('load', () =>{
Echo.join(`chat`)
.here((users) => {
console.log(users)
})
.joining((user) => {
console.log(user.name);
})
.leaving((user) => {
console.log(user.name);
})
.error((error) => {
console.error(error);
});
})

Answer 3

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.

Answer 4

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

Answer 5

Please follow the below sequence of code
first set window variable
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')
`