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
Only variables prefixed with
VITE_
are exposed. SourceVite uses
import.meta.env
I had a similar problem using React and Vite.
I swapped out
for
etc.
Then, I needed to move sure my .env.local file was in my src folder, and rename varaibles in .env.local of course