当我尝试访问 firebase 身份验证时，出现以下错误：未捕获的引用错误：firebase 未定义

Question

    const phoneInputField = document.querySelector("#phone");

    function getIp(callback) {
        fetch('https://ipinfo.io/json?token=af99e3dad456d9', { headers: { 'Accept': 'application/json' }})
            .then((resp) => resp.json())
            .catch(() => {
                return { country: 'us' };
            })
            .then((resp) => callback(resp.country));
    }

    const phoneInput = window.intlTelInput(phoneInputField, {
        initialCountry: "auto",
        geoIpLookup: getIp,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    document.getElementById("form").addEventListener("submit", process, false);

    function process(event) {
       
        event.preventDefault();

        // Extract formatted phone number
        const phoneNumber = phoneInput.getNumber();

        // Log phone number for debugging purposes
        console.log("Formatted Phone Number:", phoneNumber);

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'normal',
        'callback': (response) => {
            // reCAPTCHA solved, allow signInWithPhoneNumber.
            sendOTP(phoneNumber);
        },
        'expired-callback': () => {
            // Response expired. Ask user to solve reCAPTCHA again.
            // ...
        }
        });

       
    }

    function sendOTP(phoneNumber) {
        var appVerifier = window.recaptchaVerifier;

        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        window.confirmationResult = confirmationResult;
        // ...
        }).catch((error) => {
        // Error; SMS not sent
        // ...
        });
    }
</script>
   <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-analytics.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: "AIzaSyCYcbJ2OeXyp70VvBvK7jiepIah04S4bic",
        authDomain: "fir-local-cf48d.firebaseapp.com",
        projectId: "fir-local-cf48d",
        storageBucket: "fir-local-cf48d.appspot.com",
        messagingSenderId: "627101199334",
        appId: "1:627101199334:web:908a6f01f6bef042134427",
        measurementId: "G-CNLBT10S5Y"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    </script>

@endscript

当我尝试访问 firebase 身份验证时，出现以下错误：

Uncaught ReferenceError: firebase is not defined at HTMLFormElement.process (eval at safeAsyncFunction (livewire.js?id=e2b302e9:1249:21), \<anonymous\>:32:44)

我需要做什么才能解决这个问题？

Answer 1

您在导入并初始化 Firebase 之前正在使用 Firebase 函数。

将初始化脚本移至顶部🔝，然后不要忘记导入Firebase 身份验证库，因为您知道...您正在使用它😬：

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-analytics.js";
    import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-auth.js";
    const firebaseConfig = {
        apiKey: "AIzaSyCYcbJ2OeXyp70VvBvK7jiepIah04S4bic",
        authDomain: "fir-local-cf48d.firebaseapp.com",
        projectId: "fir-local-cf48d",
        storageBucket: "fir-local-cf48d.appspot.com",
        messagingSenderId: "627101199334",
        appId: "1:627101199334:web:908a6f01f6bef042134427",
        measurementId: "G-CNLBT10S5Y"
    };
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    window.firebaseAuth = getAuth(app);
    window.firebaseAuth = auth;
    window.RecaptchaVerifier = RecaptchaVerifier;
    window.signInWithPhoneNumber = signInWithPhoneNumber;
</script>

<script>
    // Your existing code
</script>