I'm making a blog site and trying to store it in Firestore; However, this issue persists during the Firebase setup. I cannot use the import function because they cause an error, and changing the script type to module causes another error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog editor</title>
<link rel="stylesheet" href="css/home.css" />
<link rel="stylesheet" href="css/editor.css" />
</head>
<body>
<div class="banner">
<input type="file" accept="image/*" id="banner-upload" hidden>
<label for="banner-upload" class="banner-upload-btn"><img src="img/upload.png" alt="upload banner"></label>
</div>
<div class="blog">
<textarea type="text" class="title" placeholder="Blog title..."></textarea>
<textarea type="text" class="article" placeholder="Start writing here..."></textarea>
</div>
<div class="blog-options">
<button class="btn dark publish-btn">publish</button>
<input type="file" accept="image/*" id="image-upload" hidden>
<label for="image-upload" class="btn grey upload-btn">Upload Image</label>
</div>
<script type="module" defer src="https://www.gstatic.com/firebasejs/9.21.0/firebase-app.js"></script>
<script type="module" defer src="https://www.gstatic.com/firebasejs/9.21.0/firebase-firestore.js"></script>
<script defer>
let firebaseConfig = {
apiKey: "<your-api-key>",
authDomain: "<your-auth-domain>",
projectId: "<your-project-id>",
storageBucket: "<your-storage-bucket>",
messagingSenderId: "<your-messaging-sender-id>",
appId: "<your-app-id>"
};
* const app = firebase.initializeApp(firebaseConfig);*
const db = firebase.firestore();
</script>
<script defer src="js/editor.js"></script>
</body>
</html>
I'm trying to figure out what's wrong. I already tried all sorts of alternatives here, and each has an issue. I can't get past it. I mat my wits end here, so I turn to yall on Stack Overflow.