未捕獲的引用錯誤：firebase 未在 main.js 中定義

Question

我正在嘗試將 Firebase 連接到聯系表，其中要求用戶輸入並提交全名、Email 以及消息。 但是我遇到了 Uncaught ReferenceError: firebase is not defined at my main.js file form my console。 我嘗試了不同的解決方案，但無法解決。

這是我的 index.html 中的腳本標簽

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

這是我的 Main.js 代碼

var config = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
};

firebase.initializeApp(config);


var emailRef = firebase.database().ref('emails');


  // Listen for form submit
  document.getElementById('contactForm').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();

    //Get values
    var FullName = getInputval('FullName');
    var Email =getInputval('Email');

        // save message
        saveMessage(FullName,Email);
  
    // Show alert
    document.querySelector('.alert').style.display = 'block';
  
    // Hide alert after 3 seconds
    setTimeout(function(){
      document.querySelector('.alert').style.display = 'none';
    },3000);
  
    // Clear form
    document.getElementById('contactForm').reset();
  }
  

// Function to get  form values
function getInputval(id){
    return document.getElementById(id).value;
}

  
  // Save message to firebase
  function saveMessage(Fullname, Email,){
    var newEmailRef = emailRef.push();
    newEmailRef.set({
      Fullname: Fullname,
      Email:Email

    });
  }

Answer 1

由於您在這里初始化 firebase，它應該是這樣的：

const firebase = initializeApp(config);

有關更多信息，您可以查看這里。

Answer 2

首先，您需要使用以下命令安裝firebase/app ：

npm install firebase

然后，在您的Main.js ：

const firebase = require("firebase/app") 

現在您可以正確初始化它：

const firebase = require("firebase/app") 

var config = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
};

firebase.initializeApp(config);