Laravel generates an error "Echo is Echo is not defined" - laravel-5.3

Question

I am working with Laravel Event Broadcasting and i am using pusher driver for broadcasting event and its working perfectly.
The public channel is subscribed successfully from client side using pusher provided js library
var pusher = new Pusher('xxxxxxxxxxxxxxxxxxxxx_my_app_key', {
encrypted: true
});
var channel = pusher.subscribe('TestPusher');
channel.bind('App\\Events\\TestPusher', function(data) {
alert(data.msg);
});
But when i use Echo in my client side code
Echo.channel('TestPusher')
.listen('TestPusher', (e) => {
console.log(e.msg, e.chatMessage);
});
It generates the error " Echo is not defined ".
I already installed the Laravel Echo library using npm install --save laravel-echo pusher-js in my application and also included the following code in resources/assets/js/bootstrap.js file as per the laravel provide documentation.
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'xxxxxxxxxxxxxxxxxxxxx_my_app_key'
});
So please help me how can i fix this problem.

Answer 1

My issue was that I was not compiling bootstrap.js together with the rest of the code because I had removed the line require('./bootstrap') from app.js. I added that line back and I was home and dry.
As described here

Answer 2

I had this problem a few days ago. My gulp installation was all messed up and Laravel versioning didn't help.
Sorry if this doesn't help, it's just my experience and most detailed as possible:
First, I'll consider you do have the js/app.js script included on you site.
Now, you're seeing this error because, as Josh mentioned, you're not compiling your js files. After editing 'resources/assets/js/bootstrap.js', this file needs to be compiled by running the asset compiler: gulp (named Laravel Elixir docs/5.3/elixir) in Laravel 5.3).
If you followed carefully this part of the tutorials, you shall be extra careful with laravel's npm dependencies versions, specially those used by Elixir (Once again, my gulp installation wasn't working at all even though no error messages showed up).
So, if this is a new project, you should consider updating to Laravel 5.4. If you can't or not willing to update all Laravel framework, perhaps this can be solved like I did. Staying at 5.3 but using the latest assets compiler on 5.4, named Laravel Mix. Now it runs on npm: npm run dev. (No gulp mentioned on doc.)
To achieve this, you should update to latest package.json on 5.4 and follow the 5.4 documentation to install Laravel Mix.

Answer 3

Your codes looks fine, Problem is your JS order so only you getting undefined issues
like
<script>
Echo.channel('TestPusher')
.listen('TestPusher', (e) => {
console.log(e.msg, e.chatMessage);
});
</script>
<script src="echo.js"></script>
so zigzag the order :)

Answer 4

widow object before each Echo.
window.Echo.channel('TestPusher')
.listen('TestPusher', (e) => {
console.log(e.msg, e.chatMessage);
});

Answer 5

remove defer from your app.js script tag
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>