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

【问题标题】：main.js:2 Uncaught Reference Error: firebase is not defined [duplicate]main.js：2未捕获的参考错误：未定义firebase [重复]
【发布时间】：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>

【问题讨论】：

标签： javascript node.js firebase firebase-realtime-database

【解决方案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 放在手边。

【讨论】：