laravel / echo

Laravel Echo library for beautiful Pusher and Ably integration.
https://laravel.com/docs/broadcasting#client-side-installation
MIT License
1.18k stars 182 forks source link

ReferenceError: Property 'Pusher' doesn't exist #399

Closed dlogvin closed 5 months ago

dlogvin commented 5 months ago

Echo Version

^1.16.1

Laravel Version

11.5.0

PHP Version

8.2

NPM Version

10.7.0

Database Driver & Version

No response

Description

When trying to utilize this with React Native, I'm getting the strange error message: ReferenceError: Property 'Pusher' doesn't exist

I've installed the libraries the following way:

npm i laravel-echo pusher-js

It's kind of weird.

Steps To Reproduce

Start a new expo app

run npm i laravel-echo pusher-js

And initialize it:

 window.Echo = new Echo({
        broadcaster: 'reverb',
        key: 'your-reverb-app-key',
        forceTLS: true,
    });

    // Subscribe to a private channel
    window.Echo.private(`chat.request.${username}`)
        .listen('StartChatRequest', (e) => {
            console.log('Received chat request:', e);
        });
dlogvin commented 5 months ago

It's weird, because I'm also getting this following error: _laravelEcho.default.private is not a function (it is undefined)

dlogvin commented 5 months ago

Lmao, I forgot to add pusher inside the echo configuration like this:

new Echo({
        broadcaster: 'reverb',
        Pusher, // HERE
        key: 'my-key',
        wsHost: 'localhost',
        wsPort: '8080',
        wssPort: '8080',
        forceTLS: ('http' ?? 'https') === 'https',
        enabledTransports: ['ws', 'wss'],
    });
dlogvin commented 5 months ago

BUT, unfortunately, this is still a problem: _laravelEcho.default.private is not a function (it is undefined)

dlogvin commented 5 months ago

Nevermind, the setup has to looking like this:

const channels = new Echo({
        broadcaster: 'reverb',
        Pusher, // HERE
        key: 'my-key',
        wsHost: 'localhost',
        wsPort: '8080',
        wssPort: '8080',
        forceTLS: ('http' ?? 'https') === 'https',
        enabledTransports: ['ws', 'wss'],
    });

channels.private(blah blah blah)

That should do the trick.