skip to Main Content

I’m coding a web application with Vue, Vue router, Vite and Firebase to handle the auth. To intialize my Firebase application I use the .env and to get the firebase variables (like VUE_APP_API_KEY, VUE_APP_AUTH_DOMAIN, etc…) in my firebase.js file I use process.env.VUE_APP_MY_VARIABLE. However when I go to my main page I’ve got an error in my browser’s console.

Here is the error in the console:

Uncaught ReferenceError: process is not defined at firebase.js:6:13

So I’ve tried to use import.meta.env instead of process.env but for all my variables in the .env file, it returns me undefined. I’ve tried too to define all my variables in the vite.config.js like this but it still returns me undefined:

export default defineConfig({
  plugins: [vue()],
  define: {
    "process.env.VUE_APP_MY_VARIABLE": process.env.VUE_APP_MY_VARIABLE
  }
})

I’m sure that all my variables are indeed declare in the .env file because my IDE propose me all the good name with the auto-completion. In doubt I’ve tried to rename the .env file by .env.local but it’s still the same.

Here is my firebase.js file’s code:

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

const firebaseConfig = {
    apiKey: process.env.VUE_APP_API_KEY,
    authDomain: process.env.VUE_APP_AUTH_DOMAIN,
    projectId: process.env.VUE_APP_PROJECT_ID,
    storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
    appId: process.env.VUE_APP_APP_ID
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

So can anyone help me to solve my error ?

(PS: I apologize if my English wasn’t perfect)

2

Answers


  1. Only variables prefixed with VITE_ are exposed. Source

    Vite uses import.meta.env

    Login or Signup to reply.
  2. I had a similar problem using React and Vite.

    I swapped out

    apiKey: process.env.PUBLIC_API_KEY,
    

    for

    apiKey: import.meta.env.VITE_PUBLIC_API_KEY
    

    etc.

    Then, I needed to move sure my .env.local file was in my src folder, and rename varaibles in .env.local of course

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search