Error to connect pusher Channel in larabel 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'],
 });

source https://stackoverflow.com/questions/77251003/error-to-connect-pusher-channel-in-larabel-on-heroku-app