How to get enviromental variable from Netlify UI to deployed Vite app-CodePudding

I deployed my React/Vite app. I'm using enviromental variables to configure Firebase.

const firebaseConfig = {
    apiKey: import.meta.env.production.VITE_APP_FIREBASE_API_KEY,
    authDomain: import.meta.env.production.VITE_APP_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.production.VITE_APP_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.production.VITE_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.production.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.production.VITE_APP_FIREBASE_APP_ID
}

I set up enviromental variables in the netify website settings. Here is a screenshot of env variables in settings.

Even so, it looks like the envs are undefined. I'm getting this error on deployed site:

Uncaught TypeError: Cannot read properties of undefined (reading 'VITE_APP_FIREBASE_API_KEY')

I checked if it's really in production mode by logging in import.meta.env.MODE console. It is.

Any ideas how to get enviromental variables?

CodePudding user response：

I don't understand why you added "production" before the environment variables keys?

The correct thing would not be:

const firebaseConfig = {
    apiKey: import.meta.env.VITE_APP_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_APP_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_APP_FIREBASE_APP_ID
}