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/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">×</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: "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>
>Solution :
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);