Error to connect Pusher channel in Laravel on Heroku app

I have a problem connecting the Pusher channel on Heroku to my Laravel app. It works locally, but in production it gives an error. I have already added the Pusher variables to i reavel variables in heroku and also in laravel's .env.

The error in console.log:

Uncaught You must pass your app key when you instantiate Pusher.

REVEAL COFING VARS

app_id = "1682617"
key = "4******************e"
secret = "3******************a"
cluster = "mt1"

CREDENTIALS DEVELOPMENT

PUSHER_APP_ID=1682617
PUSHER_APP_KEY=c******************3
PUSHER_APP_SECRET=f******************1
PUSHER_HOST=ws-mt1.pusher.com

Bootstrap.js

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'],
 });

Solution

You should not have an .env being pushed to Heroku, as that’s the entire point of config vars in your Heroku app. It also suggests you’re keeping your .env file with sensitive values in your Git repository that again, you do not want to be doing.

If you look in your bootstrap.js file, you’ll also notice it’s referencing environment variables with a VITE_* prefix, i.e. VITE_PUSHER_APP_KEY. So whilst you are (correctly) setting config vars for Pusher (PUSHER_APP_ID, etc) you still need to set the equivalents with the VITE_* prefix.

You should also add the nodejs build pack to your app if you haven’t already. You need to add this in addition to the php build pack. Heroku will then run your npm run build when deploying, which will build your JavaScript files using the values of the config vars in your Heroku app, and not the values from where ever you were running it before (I’m guessing either your computer, or not at all).

To summarise:

Remove any .env files from your repository: git rm -f .env
Add the nodejs build pack to your Heroku app
Remove assets if you‘ve started tracking them: git rm -rf public/hot && git rm -rf public/storage
Re-add lines to your .gitignore file to ignore the above files
Add config vars to your Heroku app for:
- VITE_PUSHER_APP_KEY
- VITE_PUSHER_APP_CLUSTER
- VITE_PUSHER_HOST
- VITE_PUSHER_PORT
- VITE_PUSHER_SCHEME
Commit and push. Heroku should now run npm run build when deploying.