Laravel generates an error "Echo is Echo is not defined"

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.

Check out this [link](https://mattstauffer.co/blog/introducing-laravel-echo). You get spark to use it. — iSrinivasan27, Jan 20 '17 at 09:04
thanks @iDroid but i already tried this link but not working for me can you give me specific explanation about this ? — Darshan Jadiye, Jan 20 '17 at 09:15
You should try using gulp to compile your assets if you have not already done so. — Josh Bolton, Jan 20 '17 at 10:37

score 1 · Answer 1 · answered Mar 07 '18 at 09:10

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

answered Mar 07 '18 at 09:10

gthuo

2,376
5
23
30

score 0 · Answer 2 · answered Feb 14 '17 at 05:03

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.

thanks for your answer @alecuys actually i already fixed it, the problem was, i actually loaded my 'js/app.js' script at the bottom of my page and i trying to get the functionality of echo instance before the actual script load :P — Darshan Jadiye, Feb 14 '17 at 07:06

score 0 · Answer 3 · answered May 17 '17 at 12:23

0

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 :)

answered May 17 '17 at 12:23

Kalidass

424
3
18

thanks @kali Dass i solved it and yes the problem with my js order – Darshan Jadiye May 17 '17 at 12:58

score 0 · Answer 4 · answered May 19 '17 at 12:03

0

widow object before each Echo.

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

answered May 19 '17 at 12:03

Samar Haider

862
10
21

score 0 · Answer 5 · answered Nov 24 '21 at 00:33

0

remove defer from your app.js script tag

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

answered Nov 24 '21 at 00:33

Kevin Tanudjaja

866
1
9
16

Laravel generates an error "Echo is Echo is not defined"

5 Answers5