javascript - Cannot use firebaseui when imported as CDN module - Stack Overflow

admin2025-04-22  1

I'm trying to get a very basic email/password sign-in working on my firebase website.

I must be importing firebaseui wrong. I'm attempting to import it as a CDN like so:

import * as firebaseui from '.1.0/firebase-ui-auth.js';

This is because I'm not using a bundler. I'm trying to mimic importing it as a namespace like all the tutorials show (import * as firebaseui from 'firebaseui';). When importing as a cdn like above and then running this code:

// 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);

I get this console error:

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

Commenting out the credentialHelper line also results in a similar error, but with the firebaseui.auth.AuthUI(authInstance) line.

However:

If I instead source the firebaseui script and run my script directly in the html file...

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

<link type="text/css" rel="stylesheet" href=".1.0/firebase-ui-auth.css" />
    <script src=".1.0/firebase-ui-auth.js"></script>

    <script type="module">
        import { initializeApp } from '.1.0/firebase-app.js';

        import { collection, getDocs, getFirestore } from '.1.0/firebase-firestore.js';

        import { EmailAuthProvider, getAuth, signOut, onAuthStateChanged } from '.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);
//...

This works perfectly and I get the email login section.

What am I doing wrong in the first attempt? I'd prefer to keep the script as a separate js file.

Thanks and sorry if I misuse some terms, I'm very new to all of this.

转载请注明原文地址:http://www.anycun.com/QandA/1745299157a90546.html