service firestore is not available

D

7

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.

Defector answered 2/9, 2021 at 15:20 Comment(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. – Mattland 2/9, 2021 at 17:22

Not so sure that's the cause because firebase.js was loading fine. – Defector 2/9, 2021 at 18:34

Go to firebase console and add new web app. They generate the code for you. – Outboard 7/3, 2022 at 17:2

H

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.

Hysterectomy answered 25/11, 2021 at 10:41 Comment(0)

M

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

Mattland answered 2/9, 2021 at 17:38 Comment(4)

Checkout my updated question I'm already adding type="module" – Defector 2/9, 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? – Mattland 2/9, 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'; – Stricker 5/9, 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. – Defector 7/9, 2021 at 17:14

I

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";

Insphere answered 25/3, 2022 at 12:38 Comment(0)

K

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

Kelliekellina answered 2/11, 2022 at 17:44 Comment(0)

S

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"

Solid answered 22/4, 2023 at 20:41 Comment(0)

A

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

Adjoint answered 9/5, 2023 at 2:48 Comment(0)

V

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.

Veator answered 31/7 at 20:37 Comment(0)

Recommended topics

Hot tags