main.js：2未捕获的参考错误：未定义firebase [重复]

Posted 2023-03-08

【中文标题】main.js：2未捕获的参考错误：未定义firebase [重复]

【英文标题】：main.js:2 Uncaught Reference Error: firebase is not defined [duplicate]

【发布时间】：2021-12-11 14:22:48

【问题描述】：

我正在尝试将我的 html 联系表单与 firebase 链接，但遇到错误：

未捕获的参考错误：firebase 未定义

在我的 main.js 文件中，我在我的 html 文件中很好地定义了我的 CDN，但在 main.js 行中 是我面临这个错误的地方。我在我的项目中成功安装了firebase，但是 在下面的行中我仍然面临同样的问题。

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

在我的 main.js 代码中

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

    );
  

在我的 index.html 文件中，这里是我的 CDN 格式

<script type="module">
  // Import the functions you need from the SDKs you need
  import  initializeApp  from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
  import  getAnalytics  from "https://www.gstatic.com/firebasejs/9.1.3/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: "xxxxx",
    authDomain: "xxxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxx",
    appId: "xxxxx",
    measurementId: "xxxxx"
  ;

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


<script src="main.js"></script>

【参考方案1】：

您的第二个 sn-p 在这里以 ES 模块格式导入 Firebase 版本 9：

<script type="module">

但是在第一个 sn-p 中，您尝试使用 Firebase 的旧语法 firebase.database()。

这行不通：您将不得不使用新的导入格式和语法，或者使用旧的命名空间语法。

---

相当于这个 v8 代码：

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

在v9 modular syntax 中：

import  getDatabase, ref  from "firebase/database";

// Get a reference to the database service
const database = getDatabase(app);
var emailRef = ref(database, 'emails'); 

---

v8 中的这段代码：

function saveMessage(Fullname, Email,)
  var newEmailRef = emailRef.push();
  newEmailRef.set(
    Fullname: Fullname,
    Email:Email

  );

在v9 中看起来像这样：

import  getDatabase, ref, push, set  from "firebase/database";

function saveMessage(Fullname, Email,)
  var newEmailRef = push(emailRef);
  set(newEmailRef, 
    Fullname: Fullname,
    Email:Email
  );

---

当您使用新旧语法的组合时，我建议您将upgrade guide 放在手边。