未捕获的 ReferenceError：未定义 firebase

Question

I tried several methods but nothing works. I link this:

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

It's config to firebase:

<script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js";
      import { getFirestore } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";
      const firebaseConfig = {
      // some config
      };

      const app = initializeApp(firebaseConfig);
            const analytics = getAnalytics(app);
            const db = getFirestore(app);
      async function getCities(db) {
        const citiesCol = collection(db, 'cities');
        const citySnapshot = await getDocs(citiesCol);
        const cityList = citySnapshot.docs.map(doc => doc.data());
        return cityList;
      }
      </script>

Config to auth:

<script>
          var uiConfig = {
            signInSuccessUrl: 'localhost:5500',
            signInOptions: [
            {
              provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
              signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
            }
            ],
            tosUrl: 'localhost:5500',
            privacyPolicyUrl: function() {
              window.location.assign('localhost:5500');
            }
          };
          var ui = new firebaseui.auth.AuthUI(firebase.auth());
          ui.start('#firebaseui-auth-container', uiConfig);
        </script>

Problem is Uncaught ReferenceError: firebase is not defined. For:

provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,

I'm trying to connect authorization through firebase to my website. How to fix this? Help please.

Answer 1

The "Uncaught ReferenceError: firebase is not defined" error occurs when the code is trying to use the firebase object, but the object is not defined. This can happen for a number of reasons, including:

1. The Firebase JavaScript library has not been properly loaded. Make sure that you have included the correct script tag to load the Firebase library in your HTML file:

<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>

2. You might be trying to use the firebase object before the library has finished loading. To fix this, you can wrap your code in a function and call it after the firebase library has finished loading:

window.onload = function() {
  // Your code here
};

3. There may be a typo or other mistake in the name of the firebase object. Make sure that you are using the correct spelling and case when referring to the object.

4. If you are using a bundler like webpack or rollup, make sure that the Firebase library is correctly imported and available to your code.