I have a website with a table I am attempting to use firebase on. However, whenever I run my web app I keep getting the error:
Uncaught ReferenceError: firebase is not defined
at main.html:176:18
in my console. When I searched for solutions online most of them said to include the firebase js library in your index.html but I have already done that. I have tried a lot of different things but I am still getting the same error in my console. What could be the problem?
<!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/[email protected]/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/[email protected]/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 >
<div >
<div >
<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" 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" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div >
<div >
<div >
<h5 id="exampleModalLabel">New message</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<form>
<div >
<label for="recipient-name" >Item Name</label>
<input type="text" id="recipient-name">
</div>
<div >
<label for="message-text" >ID Number</label>
<textarea id="message-text"></textarea>
</div>
</form>
</div>
<div >
<button type="button" data-dismiss="modal">Close</button>
<button type="button" id = "sendBtn" >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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: "AIzaSyAalz5fFuOOG6_EZVFIO-hJRA2Sw1Yyg2A",
authDomain: "lost-and-found-system-67568.firebaseapp.com",
databaseURL: "https://lost-and-found-system-67568-default-rtdb.firebaseio.com",
projectId: "lost-and-found-system-67568",
storageBucket: "lost-and-found-system-67568.appspot.com",
messagingSenderId: "32608786023",
appId: "1:32608786023:web:6aea01187ecb53ce6a66c2"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = firebase.database();
console.log(db);
</script>
</body>
</html>
CodePudding user response：
See the documentation for Alternative ways to add Firebase to your JavaScript project.
When using the v9 modular syntax, you need to import the relevant functions from their individual SDKs (just like your TODO says).
Since you're wanting the Realtime Database, that would look like this...
import { getDatabase } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-database.js"
// ...
const db = getDatabase(app);