I am currently facing an issue with my firebase configuration in a JS file that I import into my index.html. Everything works perfectly when the values in the JS file are hardcoded.
<script src="./firebase-config.js"></script>
<script type="module">
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import { firebaseConfig } from './firebase-config.js';
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
export var firebaseConfig = {
apiKey: "<my-api-key>",
authDomain: "<my-auth-domain>",
databaseURL: "<my-database-url>",
projectId: "<my-project-id>",
storageBucket: "<my-storage-bucket>",
messagingSenderId: "<my-messaging-sender-id>",
appId: "<my-app-id>",
measurementId: "<my-measurement-id>"
};
However, when attempting to use environmental variables within the JS file such as
apiKey: process.env.FIREBASE_API_KEY