'Uncaught ReferenceError. Firebase SDK not recognised despite correct order of script tags
I am trying to implement firebase authentication on my website. However, whenever I try to test the function, I get the following error:
Uncaught ReferenceError: createUserWithEmailAndPassword is not defined
It will produce the applicable ReferenceError for any Firebase SDK function I try to use.
A common problem most people point out is not ordering the script tags correctly, however, mine seem fine to me:
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-analytics.js";
import { getAuth, createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxxx",
projectId: "xxxxxx",
storageBucket: "xxxxxxx",
messagingSenderId: "xxxxxxx",
appId: "xxxxxxxx",
measurementId: "xxxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);
</script>
<script src="scripts/auth.js"></script>
<script src="scripts/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I am absolutely stumped as to what might be causing this, any input would be extremely appreciated.
Edit: I have identified that the script tags execute in the wrong order, printing to console occurs first in auth.js, then in the Firebase intialisation script. How would I ensure they execute in the correct order?
Edit2: I added defer
attributes to my other script tags which now shows that they execute in the correct order. However, I still get the same reference error.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|