I was also facing the same issue. The issue was with my api.js
file.
const api = liveAPi;
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
It clearly shows it was not accessing the firebase object.
Firebase suggest to add js file through <script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js">
,
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
But I was accessing the firebase objects in the js file.
So to resolve this: Add those to firebase object just before including the api.js file in HTML, like this:-
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js"></script>
<script src="../js/fetch/api.js"></script>
This will enable api.js to access the firebase object.
There are some other methods related to accessing those firebase objects in javascript files also, but the default setup provided by firebase through the global object is safe.
And, The method of writing all the Javascript code in APP.js and accessing firebase objects and methods is also a good choice but very painful for larger projects. Since you need to refactor your code and bundle/include it to one file App.js.
<script
tag. You'll have to include the minimal steps with which we can reproduce your problem.