Getting an Error on console while saving data in firebase firestore

Question

here is my Javascript code. its simply copy from the firebase Docs

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
<script>
  // Initialize Firebase
    var config = {
        apiKey: ".",
        authDomain: ".",
        databaseURL: ".",
        projectId: ".",
        storageBucket: ".",
        messagingSenderId: ".[enter image description here][1]"
    };
  firebase.initializeApp(config);

    // Initialize Cloud Firestore through Firebase

    var db = firebase.firestore();
    function submitCountry(){
    console.log('in funtion');
    db.collection("cities").doc("asdasLA").set({
        name: "Los Angeles",
        state: "CasdasA",
        stasdaate: "CasdasdasA",
        stasaasddaate: "CAasd",
        country: "USA"
    })
    .then(function() {
        console.log("Document successfully written!");
    })
    .catch(function(error) {
        console.error("Error writing document: ", error);
    });
}
</script>

when i refresh my page it show the uncaught error.

{code: "app/duplicate-service", message: "Firebase: Firebase service named 'firestore' already registered (app/duplicate-service).", name: "firestore", stack: "firestore: Firebase: Firebase service named 'fires…m/firebasejs/5.3.0/firebase-firestore.js:1:326255"} firebase @ index.esm.js:17591 (anonymous) @ index.esm.js:41 index.esm.js:17591

Uncaught Error: Cannot instantiate firebase-firestore - be sure to load firebase-app.js first.

after clicking my save button it shows the error mention below.

when i use the same code on simple project without any JS or Bootstrap it works fine but same code i placed in My real project with Bootstrap it shows errors

[Intervention] Slow network is detected. See for more details. Fallback font will be used while loading:

Answer 1

By doing

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>

you load the 'firestore' Firebase service twice, see the doc: https://firebase.google.com/docs/web/setup

You should either do

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>

or

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>

Also note that in your code you have mixed versions (ie 5.4.2 and 5.3.0). Most probably something to avoid.

---

Following your comment below, in order to check that it writes correctly to the db, modify you code as follows and just open the HTML page (the set() method will be triggered automatically)

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>

<script>
  // Initialize Firebase
    var config = {
        apiKey: ".",
        authDomain: ".",
        databaseURL: ".",
        projectId: ".",
        storageBucket: ".",
        messagingSenderId: ".[enter image description here][1]"
    };
    firebase.initializeApp(config);

    // Initialize Cloud Firestore through Firebase

    var db = firebase.firestore();

    db.collection("cities").doc("asdasLA").set({
        name: "Los Angeles",
        state: "CasdasA",
        stasdaate: "CasdasdasA",
        stasaasddaate: "CAasd",
        country: "USA"
    })
    .then(function() {
        console.log("Document successfully written!");
    })
    .catch(function(error) {
        console.error("Error writing document: ", error);
    });
}
</script>