caught Error: Service storage is not available

Question

I'm trying to connect to my local emulator and i'm getting an error.

My firebase.js file reads like:

const hostname = window.location.hostname;
const app =
  hostname === "localhost"
    ? initializeApp({
        apiKey: process.env.REACT_APP_APIKEY,
        authDomain: process.env.REACT_APP_AUTHDOMAIN,
        projectId: process.env.REACT_APP_PROJECTID,
        storageBucket: process.env.REACT_APP_DEMOSTORAGEBUCKET,
        messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
        appId: process.env.REACT_APP_APPID,
        // measurementId: process.env.REACT_APP_MEASUREMENTID,
      })
    : initializeApp({
        apiKey: process.env.REACT_APP_APIKEY,
        authDomain: process.env.REACT_APP_AUTHDOMAIN,
        projectId: process.env.REACT_APP_PROJECTID,
        storageBucket: process.env.REACT_APP_STORAGEBUCKET,
        messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
        appId: process.env.REACT_APP_APPID,
        measurementId: process.env.REACT_APP_MEASUREMENTID,
      });

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const functions = getFunctions(app);
export const analytics = () => {
  if (hostname === "localhost") {
    return;
  } else {
    return getAnalytics(app);
  }
};

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

There are two other questions that came across this same issue and they both solved it by deleting/removing their "yarn-lock" file, i'm using npm and i don't know what the consequences of deleting package-lock.json.

firebase service storage is not available - React Js https://github.com/firebase/firebase-js-sdk/issues/6894

I looked up an answer to redo package-lock.json and it told me to run npm install. I ran it and nothing changed.

Deleting `package-lock.json` to Resolve Conflicts quickly

Any insights would be greatly appreciated.

`const isBrowser = typeof window !== "undefined"; let hostname : string; if(isBrowser) { hostname = window.location.hostname; } ` Can you add this snippet and share the result? — Roopa M, May 04 '23 at 07:25
Is ```string``` typescript or javascript because its giving me red squiggly lines with ```Type annotations can only be used in TypeScript files```. My file is JS. — Coolkid, May 04 '23 at 11:56
Then just try `let hostname ;` instead of `let hostname : string; ` — Roopa M, May 04 '23 at 13:41
Nothing changes. If it means anything, when i run ```console.log(window.location.hostname)```, it return ```localhost``` — Coolkid, May 04 '23 at 21:26

Chris · Answer 1 · 2023-05-08T18:37:37.137

It's unclear the difference between REACT_APP_DEMOSTORAGEBUCKET vs REACT_APP_STORAGEBUCKET, but when connecting to the emulator suite it's not necessary.

If you're using a demo- project ID you don't need to initialize with anything other than a project ID, and apiKey (the latter being unnecessary and Firebase will remove the need for it. bug for reference)

Here's a working example that I think demonstrates what you want to do:

firebase emulators:start --project=demo-something

import {
    initializeApp
} from "firebase/app";
import {
    getAuth,
    connectAuthEmulator
} from "firebase/auth";
import {
    getStorage,
    connectStorageEmulator
} from "firebase/storage";
import {
    getFirestore,
    connectFirestoreEmulator
} from "firebase/firestore";

import {
    doc,
    setDoc,
    getDoc
} from "firebase/firestore";


const app = initializeApp({
    projectId: "demo-something",
    apiKey: "any-nonempty-string",
});

const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

connectAuthEmulator(auth, "http://127.0.0.1:9099");
connectFirestoreEmulator(db, "127.0.0.1", 8080);
connectStorageEmulator(storage, "127.0.0.1", 9199);

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
    name: "Los Angeles",
    state: "CA",
    country: "USA"
});

const docRef = doc(db, "cities", "LA");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
    console.log("Document data:", docSnap.data());
} else {
    // docSnap.data() will be undefined in this case
    console.log("No such document!");
}

caught Error: Service storage is not available

1 Answers1