How to us laravel-echo and pusher-js with Typescript

Question

I am trying to install and use laravel-echo and pusher-js. I have the following:

bootstrap.ts

import Pusher from 'pusher-js';
import Echo from 'laravel-echo';

window.Pusher = Pusher;

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: import.meta.env.VITE_PUSHER_APP_KEY,
  wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_CLUSTER}.pusher.com`,
  wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
  wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
  forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
  enabledTransports: ['ws', 'wss'],
});

However, I get two errors

Property 'Pusher' does not exist on type 'Window & typeof globalThis'.
Property 'Echo' does not exist on type 'Window & typeof globalThis'.

What is going wrong here?

Does this answer your question? How do you explicitly set a new property on `window` in TypeScript? — maiorano84
– maiorano84, Commented Mar 1, 2024 at 15:29
Thanks for asking this question and make the answer available to be — mwangaben
– mwangaben, Commented Nov 7, 2024 at 2:39

Jerwin Mathew Aton · Accepted Answer · 2024-03-07 20:04:43Z

2

I have the same problem while learning laravel with react typescript, this one worked for me

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;

//add these
declare global {
    interface Window {
        Pusher: any; 
        Echo: Echo; 
    }
}

and use it in app.tsx via window.Echo

window.Echo.channel('messenger').listen('MessageSent', (e: any) => {
    console.log(e);
});

answered Mar 7, 2024 at 20:04

Jerwin Mathew Aton

777 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dSebastien · Accepted Answer · 2024-10-16 06:31:51Z

2

I've added the following to my global.d.ts file

...
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

declare global {
  interface Window {
    ...
    
    Pusher: typeof Pusher;
    Echo : Echo;
}
....

}

answered Oct 16, 2024 at 6:31

dSebastien

2,0232 gold badges22 silver badges31 bronze badges

1 Comment

mwangaben Over a year ago

Thanks, this has worked for as i wanted to have types and not add any

Albimani · Accepted Answer · 2025-09-29 09:28:53Z

0

Use it as follows to get a completion
1. create global.d.ts at resources/js with the following

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

declare global {
    interface Window {
        Pusher: Pusher;
        // replace "pusher" with "ably", "reverb" or whatever you're using
        Echo: Echo<"pusher">; 
    }
}

2. access it via window.Echo and you'll get a completion list

answered Sep 29 at 9:28

Albimani

312 bronze badges

Collectives™ on Stack Overflow

How to us laravel-echo and pusher-js with Typescript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related