Filament•2d ago

Laravel Echo cannot be found on custom page in filament

Hey folks, First of all echo is working outside filament properly for all type of channel and event are send properly but inside my filament custom page it give those error

echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher.
fi @ echo.js?v=3.2.116.0:2
e @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ echo.js?v=3.2.116.0:2
a @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ chat:1054
supportLaravelEcho.js:16 Laravel Echo cannot be found

echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher.
fi @ echo.js?v=3.2.116.0:2
e @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ echo.js?v=3.2.116.0:2
a @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ chat:1054
supportLaravelEcho.js:16 Laravel Echo cannot be found

which is because it doesnt inject the parameter to echo

                window.Echo = new window.EchoFactory(JSON.parse('{\u0022broadcaster\u0022:\u0022reverb\u0022,\u0022key\u0022:null,\u0022cluster\u0022:null,\u0022wsHost\u0022:null,\u0022wsPort\u0022:null,\u0022wssPort\u0022:null,\u0022authEndpoint\u0022:\u0022\\\/broadcasting\\\/auth\u0022,\u0022disableStats\u0022:true,\u0022encrypted\u0022:true,\u0022forceTLS\u0022:false}'))

                window.dispatchEvent(new CustomEvent('EchoLoaded'))

                window.Echo = new window.EchoFactory(JSON.parse('{\u0022broadcaster\u0022:\u0022reverb\u0022,\u0022key\u0022:null,\u0022cluster\u0022:null,\u0022wsHost\u0022:null,\u0022wsPort\u0022:null,\u0022wssPort\u0022:null,\u0022authEndpoint\u0022:\u0022\\\/broadcasting\\\/auth\u0022,\u0022disableStats\u0022:true,\u0022encrypted\u0022:true,\u0022forceTLS\u0022:false}'))

                window.dispatchEvent(new CustomEvent('EchoLoaded'))

Here you can see that every parameters are null. all my .env are setup properly and the link with vite also (not my production env here)

REVERB_APP_ID=743618
REVERB_APP_KEY=ymirrcrys9crhiwm7cmy
REVERB_APP_SECRET=tzrvf9dqwg9iqld62s3c
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

REVERB_APP_ID=743618
REVERB_APP_KEY=ymirrcrys9crhiwm7cmy
REVERB_APP_SECRET=tzrvf9dqwg9iqld62s3c
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Anyone have a idea :0 ?

9 Replies

Cristina•2d ago

I guess that you have done "npm run build", in case no, you can call that first. And in my custom filament page, i use this to listen the channel event, public function getListeners() { return [ "echo:private-channel-name,.EventName" => 'someFunction', ]; } if your channel is private, do use echo:private-channel-name, i tried followed livewire doc using echo-private:channel-name, it did not work for me, and do use the dot before the EventName, in case not working in your event add public function broadcastAs() { return 'EventName'; }. hope this helps

Nuxnux•2d ago

. is for whisper if i remember right ? i give it a try right now thanks for the fast response

Cristina•2d ago

the doc said that dot is needed for custom event name if you broadcast a event name different from you event class name, although in my case i used the same name but i also need to add the dot to let it work

Nuxnux•2d ago

i've modified as you said but the issue with the laravele cho not found remains

echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher.
fi @ echo.js?v=3.2.116.0:2
e @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ echo.js?v=3.2.116.0:2
a @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ chat:1089
supportLaravelEcho.js:16 Laravel Echo cannot be found

echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher.
fi @ echo.js?v=3.2.116.0:2
e @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ echo.js?v=3.2.116.0:2
a @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ chat:1089
supportLaravelEcho.js:16 Laravel Echo cannot be found

                window.Echo = new window.EchoFactory(JSON.parse('{\u0022broadcaster\u0022:\u0022reverb\u0022,\u0022key\u0022:null,\u0022cluster\u0022:null,\u0022wsHost\u0022:null,\u0022wsPort\u0022:null,\u0022wssPort\u0022:null,\u0022authEndpoint\u0022:\u0022\\\/broadcasting\\\/auth\u0022,\u0022disableStats\u0022:true,\u0022encrypted\u0022:true,\u0022forceTLS\u0022:false}'))

                window.dispatchEvent(new CustomEvent('EchoLoaded'))

                window.Echo = new window.EchoFactory(JSON.parse('{\u0022broadcaster\u0022:\u0022reverb\u0022,\u0022key\u0022:null,\u0022cluster\u0022:null,\u0022wsHost\u0022:null,\u0022wsPort\u0022:null,\u0022wssPort\u0022:null,\u0022authEndpoint\u0022:\u0022\\\/broadcasting\\\/auth\u0022,\u0022disableStats\u0022:true,\u0022encrypted\u0022:true,\u0022forceTLS\u0022:false}'))

                window.dispatchEvent(new CustomEvent('EchoLoaded'))

Cristina•2d ago

i notice that your errore said "echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher." do you use pusher? if so, in your .env i see you set REVERB_APP_ID, but you should set PUSHER_APP_ID

Nuxnux•2d ago

ohhh yes sure i use reverb but i think echo use pusher under the hood

Cristina•2d ago

nope, if you want to use pusher, you need to install it

Nuxnux•2d ago

yes sure but i use reverb already outside filament it works fine but the instanciation of echo doesnt work on a filament custom page

Cristina•2d ago

i think if you have error said something about pusher, so maybe you have used some method or params for pusher instead of reverb

Gaming

Programming

Laravel Echo cannot be found on custom page in filament