Uncaught SyntaxError: Cannot use import statement outside a module index.js:1

Viewed 23

I'm using firebase firestore to configure the database for the website

When I add index.js to the script, the console returns error

Uncaught SyntaxError: Cannot use import statement outside a module`

so I add type="module" to the script, and then it returns

Uncaught ReferenceError: ms is not defined

import { initializeApp } from "firebase/app";
import {
    getfirestore, collection, getDocs,
    addDoc, deleteDoc, doc
} from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyAeQ_9V11B9Jxo8riUZq6nuUtZW76Mizvc",
    authDomain: "fb-auth-86194.firebaseapp.com",
    projectId: "fb-auth-86194",
    storageBucket: "fb-auth-86194.appspot.com",
    messagingSenderId: "100065049962",
    appId: "1:100065049962:web:2fc4220892c9197ec5b913",
    measurementId: "G-76BRMWM1XM",
  };

// init firebase app
const app = initializeApp(firebaseConfig);

// init services
const db = getfirestore(app);

// collection ref
const colRef = collection(db, 'books')

// get collection data
getDocs(colRef)
  .then((snapshot) => {
    let books = []
    snapshot.docs.forEach((doc) => {
        books.push({ ...doc.data(), id: doc.id })
    })
    console.log(books)
  })
  .catch(err => {
    console.log(err.message)
  })

// adding data
const addBookForm = document.querySelector('.add')
addBookForm.addEventListener('submit', (e) => {
  e.preventDefault()

  addDoc(colRef, {
    title: addBookForm.title.value,
    author: addBookForm.author.value,
  })
  .then(() => {
    addBookForm.reset()
  })
})


// deleting data
const deleteBookForm = document.querySelector('.delete')
deleteBookForm.addEventListener('submit', (e) => {
  e.preventDefault()

  const docRef = doc(db, 'books', deleteBookForm.id.value)

  deleteDoc(docRef)
  .then(() => {
    deleteBookForm.reset()
  })
})
0 Answers
Related