expo constants not working on web anymore (empty manifest object)

Question

i'm using firebase Auth in my expo app (Google Auth) and in order to do that, I need to set my firebase variables in a .env file (my API_KEYS, AuthDomain ...). I'm using expo constants to get those env variables and use them in my firebase.ts file, when implemented it worked on both mobile and web. Today I noticed that it's not working on web anymore because the constants.manifest object is empty and I don't understand why.

firebase.ts :

import { initializeApp } from "firebase/app";
import "firebase/auth";
import Constants from "expo-constants";

// Initialize Firebase

console.log("=======>", Constants);

const firebaseConfig = {
  apiKey: Constants.manifest?.extra?.apiKey,
  authDomain: Constants.manifest?.extra?.authDomain,
  projectId: Constants.manifest?.extra?.projectId,
  storageBucket: Constants.manifest?.extra?.storageBucket,
  messagingSenderId: Constants.manifest?.extra?.messagingSenderId,
  appId: Constants.manifest?.extra?.appId,
};

const Firebase = initializeApp(firebaseConfig);

export default Firebase;

app.config.js :

import "dotenv/config";

export default {
    expo: {
        entryPoint: "./src/App.tsx",
        name: "Flooz",
        slug: "flooz",
        version: "1.0.0",
        orientation: "portrait",
        icon: "./src/assets/images/icon.png",
        scheme: "flooz",
        userInterfaceStyle: "automatic",
        splash: {
            image: "./src/assets/images/splash.png",
            resizeMode: "contain",
            backgroundColor: "#ffffff",
        },
        updates: {
            fallbackToCacheTimeout: 0,
        },
        assetBundlePatterns: ["**/*"],
        ios: {
            supportsTablet: true,
        },
        android: {
            adaptiveIcon: {
                foregroundImage: "./src/assets/images/adaptive-icon.png",
                backgroundColor: "#ffffff",
            },
        },
        web: {
            favicon: "./src/assets/images/favicon.png",
        },
        extra: {
            apiKey: process.env.API_KEY,
            authDomain: process.env.AUTH_DOMAIN,
            projectId: process.env.PROJECT_ID,
            storageBucket: process.env.STORAGE_BUCKET,
            messagingSenderId: process.env.MESSAGING_SENDER_ID,
            appId: process.env.APP_ID,
        },
    },
};

Answer 1

Expo changed their manifest structure.

You can access your environment variables in Constants.expoConfig.extra (source)