ReferenceError: Echo is not defined

Question

I'm using laravel echo with pusher js to build a real-time feature in my app. I've done all the steps required as told by the doc . I've successfully set up the pusher configurations and it works fine: when my event is fired I get it notified in my Debug console on my Pusher account.

My issue is with the front-end. As told by the docs I've added the portion of code neccessary at the bottom of my resources/js/bootstrap.js file. I uncommented it actually and add the proper ids.

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key:my-pusher-key-here,
    cluster: eu,
    forceTLS: true
});

The issue is that although I've inserted those

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="js/echo.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
var channel = Echo.channel('my-channel');
channel.listen('my-event', function(data) {
  alert(JSON.stringify(data));
});
</script>

in my blade view, I'm getting this error in the browser's console: ReferenceError: Echo is not defined . I'm guessing it has something to do with echo library not found but I'm not understanding why. For the <script src="js/echo.js"></script> line, I copied the echo.js file got after the npm install --save laravel-echo pusher-js command run.

I went through many suggestions like gulp to get the changes in the Js files automatically compiled I guess but nothing... For the gulp command entered in my CLI, I'm getting No gulpfile file found error. I've also tried to copy the first portion of code directly in the app.js file instead but no difference, I'm getting the same error.

As I've said.. I guess this has certainly something to do with the Echo library not found but why that? Your help will be very appreciated

package.json file

    "private": true,
    "scripts": {
        "build": "webpack -p",
        "watch": "npm run development -- --watch",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.39.3",
        "webpack-cli": "^3.3.7"
    },
    "dependencies": {
        "gulp": "^4.0.2",
        "laravel-echo": "^1.5.4",
        "pusher-js": "^5.0.0"
    }
}

Answer 1

You have import Echo from 'laravel-echo'; inside resources/js/bootstrap.js file.

It tries to search for Echo dependency in node_modules folder.

You should use laravel-mix to build JavaScript files.

Answer 2

I have faced the same error as you, the error is happening in your resources/js/app.js file. if you have commented require('./bootstrap'); uncomment it it will work for you.

Answer 3

I believe you messed up the steps after uncommenting the lines in resources/js/bootstrap.js file. To use the code in there you need to import the resources/js/app.js file. Go look in that, you'll see it is importing the bootstrap file. You can import axios in your resources/js/app.js as you might need it in your blade. Confirm that your resources/js/app.js file at least has these lines:

require('./bootstrap');
const { default: axios } = require('axios');
window.Vue = require('vue').default;

Then in your blade file use this to get vue running:

<script src="{{ asset('js/app.js') }}"></script>
<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        mounted() {},
    });
</script>

Finally check the webpack.mix.js file and confirm that it at least has:

mix.js('resources/js/app.js', 'public/js')
.vue();

For me, using php 7.4 I had to run npm run production to build the js files. And it was running flawlessly.

Answer 4

Remove defer from your script tag. This will cause the app.js script to be deferred, and the other script will run first before this script

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

Answer 5

Go in terminal,

tape this command: npm install and use laravel mix: npm run dev that resolve my error.

Thanks.