Why Does Importing FirebaseUI as a Module from a CDN Fail?

I'm trying to implement a basic email/password sign-in on my Firebase website without using a bundler, so I'm importing FirebaseUI via a CDN. However, I encounter an error when I import it as an ES module.

I attempted to import FirebaseUI like this:

JAVASCRIPTCopied
import * as firebaseui from 'https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js';

Then I ran the following code to initialize Firebase and FirebaseUI:

JAVASCRIPTCopied
// Firebase Config
const firebaseConfig = {
    // ...
};

const app = initializeApp(firebaseConfig);
const authInstance = getAuth();


// FirebaseUI config
const uiConfig = {
    credentialHelper: firebaseui.auth.CredentialHelper.NONE,
    signInOptions: [
        EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
        signInSuccessWithAuthResult: function (authResult, redirectUrl) {
            return false;
        },
    },
};
// Initialize the FirebaseUI widget using Firebase:
const ui = new firebaseui.auth.AuthUI(authInstance);

This produces the following error in the console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'CredentialHelper')

Even commenting out the credentialHelper line leads to a similar error with the line that constructs firebaseui.auth.AuthUI.

In contrast, if I source the FirebaseUI script directly in the HTML file and then run my module script, it works perfectly:

HTMLCopied
<!-- ...head... -->

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>

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

    import { collection, getDocs, getFirestore } from 'https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js';

    import { EmailAuthProvider, getAuth, signOut, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js';

    // Initial variables
    let db, auth;

    // ...

    async function main() {
        // function that runs on page load
        // Firebase Config
        const firebaseConfig = {
            // ...
        };

        // Firebase/Firestore variables
        const app = initializeApp(firebaseConfig);
        const authInstance = getAuth();
        const db = getFirestore(app);


        // FirebaseUI config
        const uiConfig = {
            credentialHelper: firebaseui.auth.CredentialHelper.NONE,
            signInOptions: [
                // Email / Password Provider.
                EmailAuthProvider.PROVIDER_ID,
            ],
            callbacks: {
                signInSuccessWithAuthResult: function (authResult, redirectUrl) {
                    // Handle sign-in.
                    // Return false to avoid redirect.
                    return false;
                },
            },
        };
        // Initialize the FirebaseUI widget using Firebase:
        const ui = new firebaseui.auth.AuthUI(authInstance);
//...
    }
</script>

In this working example, the email login section appears as expected.

What am I doing wrong in the first attempt? Ideally, I would prefer to keep the scripts in separate JS files.

Thanks and sorry for any misuse of terms—I'm very new to Firebase and JS modules.