'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