I have a React / VITE project using Firebase / Firestore. My issue is reading the environment variables in production. Everything is working fine locally / development mode. The project builds with no errors. Below is the error I’m seeing in production. As you can see I’m logging the import.meta.env to see if we have our .env variables. I’ve also tried other related Stack Overflow articles as well.

Here’s what I’ve done to this point.

1. I made sure the variables start with VITE_XX as per VITE’S documentation here
2. I tried defining the prefix in the envPrefix property with something else
3. I tried changing the envDir property to / thinking VITE didn’t know where to look for the .env file. It defaults to the root directly soooo.
4. To make sure it wasn’t my server, I created a blank React app (CRA) without VITE and added a .env to the root with some variables and sent the build to production and it read the .env file fine. So I have reason to believe the issue is with VITE configuration and not my server.
5. .env file is located in the root of the project NOT the src directory.
6. I added a console.log in the ./src/config/firebase.ts file to verify the variables are getting read in. Seeing all variables read in locally but not production.

Here’s my current vite.config.ts config. As you can see, I’ve made changes to use process.env and not import.meta.env as suggested in VITE’s docs. I tried their approach as well with no luck. Again, this approach is reading in the .env variables fine locally but not in production in either case.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import dynamicImport from 'vite-plugin-dynamic-import'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        base: env.VITE_ROUTER_BASE_URL || '/',
        define: {
            'process.env': env,
        },
        envDir: './',
        plugins: [
            react({
                babel: {
                    plugins: ['babel-plugin-macros'],
                },
            }),
            dynamicImport(),
            tsconfigPaths(),
        ],
        assetsInclude: ['**/*.md'],
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src'),
            },
        },
        build: {
            outDir: 'build',
        },
    }
})

Here’s the ./src/config/firebase.ts file

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

console.log('VITE VARS', process.env)

const app = initializeApp({
    apiKey: process.env.VITE_FIREBASE_API_KEY,
    authDomain: process.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: process.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.VITE_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.VITE_FIREBASE_APP_ID,
})

export const auth = getAuth(app)
export const firestore = getFirestore(app)

export default app

and finally my .env located in the project root directory.

VITE_FIREBASE_API_KEY=xxx
VITE_FIREBASE_AUTH_DOMAIN=xxx
VITE_FIREBASE_PROJECT_ID=xxx
VITE_FIREBASE_STORAGE_BUCKET=xxx
VITE_FIREBASE_MESSAGE_SENDER_ID=xxxx
VITE_FIREBASE_APP_ID=1:xxxx