Jscript Error in console: Uncaught (in promise) ReferenceError: Echo is not defined

[internetbug256]

Hi there. I've been trying each and every fix suggested out there regarding this error and couldn't hit the nail. I've checked over and over my bootstrap.js, did the mix recompile, etc.

The symptom is: My Nova dashboard does not get the bell ring, so I don't get the push notification until I do a full page reload.

The error points to this part of the dist/js/tool.js code in the plugin(I've expanded it for readability):

}, function (t, n, e) {
    "use strict";
    Object.defineProperty(n, "__esModule", {value: !0}), n.default = {
        data: function () {
            return {count: 0, notifications: [], isLoading: !0, sound: Nova.config.default_sound}
        }, mounted: function () {
            var t = this;
            t.loadNotifications(function (n) {
                Echo.private(Nova.config.user_model_namespace + "." + n.data.user_id).notification(t.notificationReceived)
            }), Nova.$on("notification-read", function (n) {
                t.notifications[n.notification.id] = n.notification, t.count--
            })
        }, methods: {

So it seems that for some reason (sorry, not an expert in jscript), Echo is not defined inside that function. Any ideas?

Thanks in advance

[mirovit]

Hey @internetbug256,

You haven't setup Echo, this is why you see the error. If you follow the Installation Guide in the Readme, there's a section where this is explained. Echo does not come pre-built in the assets with the package, since this is application specific and configurable on the app level and not on the component itself.

You need to create a local JS file, like app.js or similar, install Echo in your app and include and set it up with the credentials and provider (whether a local socket server or Pusher). Then you include it in your HTML template.

If this doesn't help, let me know.

[internetbug256]

Hi. Thanks for your reply. I think Echo is installed and running (BTW, any way to check if it works?)

up to date, audited 817 packages in 8s
87 packages are looking for funding
  run `npm fund` for details
6 vulnerabilities (5 moderate, 1 high)
To address all issues, run:
  npm audit fix
Run `npm audit` for details.
[laravel@centos]$

My bootstrap.js contains:

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,
    forceTLS: true
});

Notice that the error apears when Echo is called inside dist/js/tool.js, not when it is called/instantiated. This is what I've got when I check my console (attached screenshot)

[mirovit]

Hey @internetbug256,

Yes, a way to check if Echo is setup is to try to call it in the console when the page is loaded. So from your screenshots and snippets, I can see you have the local setup and build set for Echo, but are you sure you have updated the Nova master template to include your local JS file?

It should be called layout.blade.php and inside you'll have:

// ...
<script src="{{ mix('app.js', 'vendor/nova') }}"></script>

you need to include your local file (here assuming you called it admin.js) after the app.js bundle from Nova:

// ...
<script src="{{ mix('app.js', 'vendor/nova') }}"></script>
<script src="{{ mix('js/admin.js') }}"></script>

[internetbug256]

Bingo! Bullseye!

I was missing to include that admin.js in Nova. I couldn't include it as mix <script src="{{ mix('js/admin.js') }}"></script> but it worked this way: <script src="/js/admin.js"></script> and I moved that file to public/js

BIG thank you!

PS: the admin.js contents is NOT the ECHO call. It's something like 190kb size.