0

I'm trying to use firebase's Firestore database with my small site, and I took their code from https://firebase.google.com/docs/firestore/manage-data/add-data. I first used the configs in a built-in html script, but I moved it to a file. I then added the code, and It gave me

SyntaxError: Unexpected token '{'
at /script.js:19:10

Here's my code:

Html

  <body>
    <input type="text" placeholder="type something">
    <input type="submit">
    <script src="script.js" type="module"></script> <!-- This is where my script is. -->
  </body>

Javascript (script.js)

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
      
const firebaseConfig = { //I don't know if these are sensitive, so i'm censoring them. 
  apiKey: "**",
  authDomain: "**",
  projectId: "**",
  storageBucket: "**",
  messagingSenderId: "**",
  appId: "**"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);



function writeTest() {
  import { doc, setDoc, Timestamp } from "firebase/firestore"; //this is where it says the error is.



  const docData = { //this is just test data straight from the site
      stringExample: "Hello world!",
      booleanExample: true,
      numberExample: 3.14159265,
      dateExample: Timestamp.fromDate(new Date("December 10, 1815")),
      arrayExample: [5, true, "hello"],
      nullExample: null,
      objectExample: {
          a: 5,
          b: {
              nested: "foo"
          }
      }
  };
  await setDoc(doc(db, "data", "one"), docData);
}
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Harries
  • 67
  • 1
  • 1
  • 6
  • 1
    "*should I be using the realtime database?*" Posts here are expected to focus on a single technical question that's answerable with facts and sources. Since you've already asked another core question above, and considering this question is highly opinion-based (it's largely a design decision informed by your specific requirements and constraints), it should be removed from your question entirely. [ask] – esqew Oct 26 '21 at 14:47
  • @esqew My bad, It was really an afterthought to add that. I'll remove it. Thanks for clarifying. – Harries Oct 26 '21 at 14:48
  • Maybe the import shouldn't sit inside the writeTest() function and instead on top level (/+ at beginning of file) ? – Corrl Oct 26 '21 at 15:12
  • 1
    In short, the syntax you use on that line is wrong, which is why its throwing that error; to import on that line you'll need to use a dynamic import. On top of that, for your first line, I'm pretty sure that's invalid syntax as well. The module in question needs to be local to your codebase; Deno is the only engine that allows an outside import from a url. – Daedalus Oct 26 '21 at 15:32

1 Answers1

0

This is how I set up firestore - different way but it works, so it might help

index.html
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>    
    <script defer src="/firebase-init.js"></script>
firebase-init.js
"use strict";

const firebaseConfig = { 
  apiKey: "**",
  authDomain: "**",
  projectId: "**",
  storageBucket: "**",
  messagingSenderId: "**",
  appId: "**"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

let db = firebase.firestore();

db.collection(collection).doc(docID).get().then(docObj => {})  // read document
db.collection(collection).doc(docId).set(docObj)  // write document to db
Corrl
  • 6,206
  • 1
  • 10
  • 36