uncaught exception: You must pass your app key when you instantiate Pusher.

[almokhtarbr]

Hello , i'm facing this error : uncaught exception: You must pass your app key when you instantiate Pusher. this is my config :

PUSHER_APP_ID=ad PUSHER_APP_KEY=ada PUSHER_APP_SECRET=ad PUSHER_APP_CLUSTER=add MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

[abrhambas01]

how do you solve it ?

[edrsn27]

I just run 'npm run watch' again

[moreishi]

I'm having same issue. Do we have a solution to this?

[shamoons]

Having this issue as well.

[tal3nce]

If anyone had similar issue... Just to clarify: my problem wasn't that Pusher didn't recognize the app key. It worked if I hard-coded the PUSHER_APP_KEY value directly (e.g. 'as40505dspo595spyhu5'), but it couldn't find the actual PUSHER_APP_KEY from .env file. So, this didn't work (in bootstrap.js file):

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.PUSHER_APP_KEY,
    (...)
});

The key was to change the key: process.env.PUSHER_APP_KEY line into key: process.env.MIX_PUSHER_APP_KEY, and then in your .env reference the MIX_PUSHER_APP_KEY to PUSHER_APP_KEY:

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"

And that should do it. I use Vue 2.6 and Laravel 7.9

[moreishi]

I found the solution for my case. What I did is just to the following command.

php artisan config:clear php artisan view:clear npm run watch

Then it goes well.

[Olie-Chanz]

php artisan optimize:clear npm run watch

works on me.

[Pezhvak]

running npm run watch is no good for production, in my case the issue was from my gitlab-ci, when running npm run prod make sure you have your .env file in place, otherwise assets will be built and env variables prefixed with MIX_ won't get included in them.

[a1iraxa]

Simply hard code the values like:

Vue.use(VueEcho, {
    broadcaster: 'pusher',
    // key: process.env.MIX_PUSHER_APP_KEY,
    // cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    key: "your_app_key",
    cluster: "ap1",
    forceTLS: true,
    authEndpoint: "/broadcasting/auth",
});

[sys-auditing]

Hi, i'm having the same issue even i'm running php artisan optimize:clear & npm run prod i got the same error message : uncaught exception: You must pass your app key when you instantiate Pusher.

Can some one help Thanks

[Lootfi]

Even after I prefixed the env variable with MIX it still wouldn't work in production

This clearly isn't a laravel-websockets issue though

[tipmisle]

running npm run watch is no good for production, in my case the issue was from my gitlab-ci, when running npm run prod make sure you have your .env file in place, otherwise assets will be built and env variables prefixed with MIX_ won't get included in them.

Thank you, had the same issue. I was running the npm run prod in my drone ci BEFORE I copied .env to the build dir.

[AndreiBil]

I am also dealing with this issue, anyone found a fix? My app is running on Laravel Vapor

[soufyaneyassin]

if you're facing this error with vite in laravel 9 try to set up your bootstrap.js like below:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
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_APP_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'],
});

and in your app.blade.php (or wherever you're using Echo) You need to use the newer type of module instead.

<script type="module">

        Echo.channel('channel-name')
            .listen('EventName', (e) => {
                console.log(e.attribute);
            })
</script>