6

I'm trying to connect to my firestore using plain javascript. (I wanna get up to speed and running for now)

index.js:

import app from './firebase.js'
import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js'
const db = getFirestore(app)

However, this throws an error: Uncaught Error: Service firestore is not available

firebase.js:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
 
  const firebaseConfig = {
    // configs
  };

  // Initialize Firebase
  let app
  export default app = initializeApp(firebaseConfig);

Then I import the script in my index.html:

<!DOCTYPE html>
....
<script type="module" src="index.html"></script>

Note: I can read and write to the firestore using firebase web interface.

3
  • You cannot import a module from remote url, so import { something } from 'https://...'; won't work and that's why is throwing an error.
    – Kox
    Commented Sep 2, 2021 at 17:22
  • Not so sure that's the cause because firebase.js was loading fine.
    – Samuel
    Commented Sep 2, 2021 at 18:34
  • Go to firebase console and add new web app. They generate the code for you.
    – HMR
    Commented Mar 7, 2022 at 17:02

7 Answers 7

3

Using npm, but got the same error message. Restarted terminal & uninstalled and reinstall firebase, then worked...not sure which one that did it though.

2

So if you want to use plain js (without bundlers like webpack), you would need to put your JS code into script tag like so:

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
  
  const firebaseConfig = { ... };
  const app = initializeApp(firebaseConfig);
</script>

Otherwise, if you want to use it like you intended to do so, you would need to:

  • install a firebase package
  • a module bundler (e.g. webpack) to bundle the files for you
4
  • Checkout my updated question I'm already adding type="module"
    – Samuel
    Commented Sep 2, 2021 at 18:41
  • <script type="module" src="index.js"></script> not src="index.html" but I guess you have that already since firestore is working properly?
    – Kox
    Commented Sep 2, 2021 at 20:30
  • I faced the same issue. I just downgraded for testing and it worked. In this js file: import { initializeApp } from 'gstatic.com/firebasejs/9.0.0/firebase-app.js'; import { getFirestore, collection, getDocs, getDoc, DocumentSnapshot, query, where, limit} from 'gstatic.com/firebasejs/9.0.0/firebase-firestore.js';
    – Oru
    Commented Sep 5, 2021 at 10:46
  • Really? 9.0.0 solves the issue? I don't have bandwidth to go back to it as I've moved my project to webpack, thanks.
    – Samuel
    Commented Sep 7, 2021 at 17:14
1

You need to upgrade your firestore version 9.0.0 to 9.4.0 and it work fine

import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
1

Change your import link

import { getFirestore } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";

to

import { getFirestore } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";

just update the firebase version from 9.0.0 to 9.0.1

1

I had the same error which I corrected by using cdks with the same version. In my case I used the version (9.20.0)

"https://www.gstatic.com/firebasejs/9.20.0/firebase-app.js" 
"https://www.gstatic.com/firebasejs/9.20.0/firebase-firestore.js"
0

In my case, I had my initial imports as:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.1.1/firebase-firestore.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-analytics.js"; 

So I changed the version of my firestore from 9.1.1 to 9.21.0

0

I've worked with React Native + expo project and had this issue. In my case I have error when error appears after using getFirestore from:

import { getFirestore, setLogLevel } from "firebase/firestore";

If you are having the same error, my suggestion is to use:

setLogLevel("debug");

and put your:

let db;
try {
  db = getFirestore(app);
  // console.log("Firestore instance:", db);
} catch (error) {
  console.error("Error initializing Firestore:", error.message);
  console.error("Error Stack:", error.stack);
  console.error("Error Details:", error);
}

in this case you will see a lot more then just one line of error.

So, after checking what's going on, I realise that I have conflicting libraries installed. in app.json remove those:"

"@react-native-firebase/app", "@react-native-firebase/auth", "@react-native-firebase/crashlytics","

and uninstall @react-native-firebase from the project.

After those, my db become available and app again worked.

Not the answer you're looking for? Browse other questions tagged or ask your own question.