firebasemodulecdnmissing-features

Firebase auth CDN not exporting module

I am following the official Google tutorial example to include Firebase via CDN instead of the SDK:

https://firebase.google.com/docs/web/alt-setup#from-the-cdn

After copying the example verbatim:

<body>
  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { analytics } from 'https://www.gstatic.com/firebasejs/9.4.1/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { auth } from 'https://www.gstatic.com/firebasejs/9.4.1/firebase-auth.js'
    import { firestore } from 'https://www.gstatic.com/firebasejs/9.4.1/firebase-firestore.js'
  </script>
</body>

i get the browser error:

Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.4.1/firebase-auth.js' does not provide an export named 'auth'

Outcommenting the auth import line and you get the exact same error with the firestore import line instead.

Is this a problem with the files / tutorial or on my end?

Seems the tutorial is referring to the wrong files?

Solution

  • Looks the code sample added is wrong. Please try using the below code to use version 9+ SDK for web

    Visit https://firebase.google.com/docs/auth/web/password-auth#sign_in_a_user_with_an_email_address_and_password

    
    import { getAuth, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.5.0/firebase-auth.js'
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {`enter code here`
        const errorCode = error.code;
        const errorMessage = error.message;
      });