CODEWITHSUNDEEP
javascriptlaravelclassexportlaravel-echo
Fringesurfer
Fringesurfer

Reputation: 45

Can't Import 'Echo' from Module : Uncaught ReferenceError: Echo is not defined

I am testing the laravel/redis/socket.io messaging capabilities. During the process of initial setup I have noticed that echo.js, both the version from NPM as well as "compiled" to a module from GIT causes the error. "Uncaught ReferenceError: Echo is not defined"

I am stumped because it technically should work, any help?

1) i have used out of the box echo.js 2) I have build a js package out of the GIT laravel-echo TypeScript repository 3) I have checked that the scripts are loading

window.Echo.channel('everywhere')
    .listen('AnnouncementEvent', (e) => {
        console.log(e);
    });

I would like to find out what am I missing on a solution that should work and have the echo.js start working in tests

Upvotes: 1

Views: 1791

Answers (2)

Fringesurfer
Fringesurfer

Reputation: 45

I have solved my issue ... I am not sure it it is the correct analysis and resolution however it works.

With laravel echo distro come three distinct echo*.js files:

echo.js - a ES5-ES6 module that does not work in browser even if imported with type='module' set

echo.iife.js - a browser compatible version of the library

echo.common.js - a nodejs commonjs module

I had found I have to include echo.iife.js in order for this Javascript Echo class to register properly in browsers and be exposed to scripts.

Upvotes: 2

whmkr
whmkr

Reputation: 3085

You're missing a few puzzle pieces here...

Install predis composer require predis/predis

Install a socket.io server like this one, https://github.com/tlaverdure/laravel-echo-server

Install socket.io client library npm install --save socket.io-client

Instantiate Echo in your boostrap.js file:

import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

https://laravel.com/docs/5.7/broadcasting

Upvotes: 0

Related Questions