文章/答案/技术大牛

发布

社区首页 >问答首页 >未定义的ReferenceError:在我的应用程序中没有定义Firebase

问未定义的ReferenceError:在我的应用程序中没有定义Firebase
EN

Stack Overflow用户

提问于 2022-11-27 22:22:24

回答 1查看 25关注 0票数 -1

我有一个网站，有一个桌子，我试图使用火的基础上。然而，每当我运行我的web应用程序时，我总是会收到错误：

未定义的ReferenceError:未定义火基在main.html:176:18

在我的控制台里。当我在网上搜索解决方案时，大多数都说在您的index.html中包含了firebase库，但我已经这样做了。我尝试了很多不同的东西，但我仍然在我的控制台中遇到同样的错误。有什么问题吗？

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Old stylesheet still needed -->
  <!-- <link rel="stylesheet" href= "lost.css"> --> <!-- other table styles -->
  <!-- Bulma CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <!-- New custom CSS -->
  <link rel="stylesheet" href= "style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <style>
    .jumbotron {
      padding: 1rem 1 rem;
      margin-bottom: 0rem;
      background-color: rgb(40,56,144);
      border-radius: .3rem;
    }
    table th {
      color: #f8f9fa!important;
    }
  </style>
</head>

<body>
  <main>
    <section>
        <!-- Navbar -->
    </section>
    
    <!-- Title -->
    <section>
      <div class = "jumbotron jumbotron-fluid">
        <div class = "container">
          <h1 class = "display-8">LOST ITEMS</h1>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <button id = "btnNew" class = "btn btn-primary" data-toggle = "tooltip" title = "New report">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
              </svg>
            </button>
            <!-- Modal -->
            <div id="exampleModal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Item Name</label>
                        <input type="text" class="form-control" id="recipient-name">
                      </div>
                      <div class="form-group">
                        <label for="message-text" class="col-form-label">ID Number</label>
                        <textarea class="form-control" id="message-text"></textarea>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id = "sendBtn" class="btn btn-primary">Send</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- CRUD Table -->
            <table id = "tableLostItems" class = "table table-bordered">
              <thead>
                <tr class = "bg-dark">
                  <th scope = "col">Item Name</th>
                  <th scope = "col">ID Number</th>
                  <th scope = "col">Item description</th>
                  <th scope = "col">Last seen location</th>
                  <th scope = "col">Unique Identifier</th>
                  <th scope = "col">Item Type</th>
                  <th scope = "col">Image</th>
                </tr>
              </thead>
              <tbody id = "bodyLostItems">

              </tbody>
            </table>

          </div>
        </div>
      </div>
    </section>


    </main>
    <!-- jQuery, Popper.js, and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    
    <script src="main.js"></script>
        <script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.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
      const firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        appId: ""
      };
    
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const db = firebase.database();
      console.log(db);
    </script>
    
</body>
</html>

es6-modules

javascript

firebase

cdn

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-27 22:41:20

请参阅将Firebase添加到JavaScript项目的其他方法的文档。

当使用v9模块语法时，您需要从它们的个别SDK中导入相关的函数(就像您的TODO所说的那样)。

既然你想要实时数据库，那会是这样的.

import { getDatabase } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-database.js"

// ...

const db = getDatabase(app);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74594247

复制

相似问题

问未定义的ReferenceError:在我的应用程序中没有定义Firebase
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义的ReferenceError:在我的应用程序中没有定义FirebaseEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义的ReferenceError:在我的应用程序中没有定义Firebase
EN