im not sure what the issue is but im trying to make a blog editor and the code involves a publish button that post the blog on he website and on firebase but ive run into this problem: Uncaught SyntaxError: Unexpected token ‘{‘ (at editor.js:71:16)
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.20.0/firebase-app.js";
import { getFirestore} from "https://www.gstatic.com/firebasejs/9.20.0/firebase-firestore.js";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "i have it in my project file dw",
authDomain: "the-butler-353f4.firebaseapp.com",
projectId: "the-butler-353f4",
storageBucket: "the-butler-353f4.appspot.com",
messagingSenderId: "804499070225",
appId: "1:804499070225:web:28bf3f44bf8bc3a38100b0"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { app, db };
const blogTitleField = document.querySelector('.title');
const articleFeild = document.querySelector('.article');
// banner
const bannerImage = document.querySelector('#banner-upload');
const banner = document.querySelector(".banner");
let bannerPath;
const publishBtn = document.querySelector('.publish-btn');
const uploadInput = document.querySelector('#image-upload');
bannerImage.addEventListener('change', () => {
uploadImage(bannerImage, "banner");
})
uploadInput.addEventListener('change', () => {
uploadImage(uploadInput, "image");
})
const uploadImage = (uploadFile, uploadType) => {
const [file] = uploadFile.files;
if(file && file.type.includes("image")){
const formdata = new FormData();
formdata.append('image', file);
fetch('/upload', {
method: 'post',
body: formdata
}).then(res => res.json())
.then(data => {
if(uploadType == "image"){
addImage(data, file.name);
} else{
bannerPath = `${location.origin}/${data}`;
banner.style.backgroundImage = `url("${bannerPath}")`;
}
})
} else{
alert("upload Image only");
}
}
const addImage = (imagepath, alt) => {
let curPos = articleFeild.selectionStart;
let textToInsert = `r![${alt}](${imagepath})r`;
articleFeild.value = articleFeild.value.slice(0, curPos) + textToInsert + articleFeild.value.slice(curPos);
}
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
publishBtn.addEventListener('click', () => {
if(articleFeild.value.length && blogTitleField.value.length){
// generating id
let letters = 'abcdefghijklmnopqrstuvwxyz';
let blogTitle = blogTitleField.value.split(" ").join("-");
let id = '';
for(let i = 0; i < 4; i++){
id += letters[Math.floor(Math.random() * letters.length)];
}
// setting up docName
let docName = `${blogTitle}-${id}`;
let date = new Date(); // for published at info
//access firstore with db variable;
const { doc, setDoc } = require("firebase/firestore");
import { doc, setDoc } from "firebase/firestore";
const blogRef = doc(db, "blogs", docName);
const docData = {
title: blogTitleField.value,
article: articleFeild.value,
bannerImage: bannerPath,
publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
};
setDoc(blogRef, docData)
.then(() => {
location.href = `/${docName}`;
})
.catch((err) => {
console.error(err);
});
}
})
im making a publish button on a blog site and I don’t believe this is an issue with firebase
2
Answers
Your line 71 shouldn’t have an import
An import declaration can only be used at the top level of a module
If you’re running this code in a browser, probably you need to replace your
import
with loadingfirestore
from CDN (https://firebase.google.com/docs/web/alt-setup).Or, in the other hand, you could pack your script along with the
firestore
using webpack.