We Keep Coding

Firebase Packages called within Custom Packages

I'm working on custom packages we use internally in our organization and I'm trying to reduce how many properties I need to pass into the Component I'm creating for the package. One of the components I'm building involve firebase/storage. I want to only pass the result of getStorage() from my app and let the package import ref, uploadBytes, etc. I don't want to have to import them individually and pass them as props. However, whenever I try to import ref in the package and call ref(storage), it returns the FirebaseStorageImpl again, not the StorageReference I expect.
Some code from the compiled package:
import React, { useState, useEffect } from 'react';
import { ref, uploadBytes, deleteObject } from 'firebase/storage';
export const Files = (props) => {
const {
storage
} = props;
console.log(
storage,
ref(storage)
);
}
And my application file:
import { React } from 'react';
import { Files } from 'my-package';
import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';
const App = () => {
const firebaseApp = initializeApp(/* FIREBASE CONFIG */);
const storage = getStorage(firebaseApp);
return (<Files
storage={storage}
/>)
}

Firebase v9 Database. ref is not a function?

I've started migrating over to v9 Modular firebase. Please see my config:
import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
..
};
const app = initializeApp(firebaseConfig);
// Get a reference to the database service
export const database = getDatabase(app);
Then in another file I made basic CRUD functions.
import { database } from "./firebase"
export const insertTestData = () => {
return database.ref("test").set({name:"hello world"})
}
I got the following error:
Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_0__.database.ref is not a function
Did I miss anything?
I'm not sure why it's also not picking up imports

You are importing ref() from Modular SDK but still using name-spaced syntax.
Try:
import { getDatabase, ref, set } from "firebase/database";
export const insertTestData = () => {
return set(ref(database, "test"), { name: "hello" })
}
Make sure you are referring to the "Modular" tab of the code snippets in the documentation

how can i read firebase realtime database?

here's my code, it is the exact copy of the docs but it says that ref.on is not a function. maybe i forgot to put a module in the import but i couldn't find any information about that.
function readpixels() {
const db = getDatabase();
const ref = ref(db, 'pixels');
ref.on('value', (pixel) => {
console.log("read")
})
}
and here are the import lines:
import { initializeApp } from "firebase/app";
import { getDatabase, ref, push, set } from "firebase/database";

You're importing the new v9 functions, but in your code you are then trying to use the older syntax. You'll have to pick one or the other.
In v9 syntax, the ref.on("value" would be:
import { onValue } from "firebase/database";
...
onValue(ref, (pixel) => {
console.log("read")
}
Also see the Firebase documentation on reading from the Realtime Database with the v9 SDK.

React Native: firestore/firebase Expected first argument to collection() to be a CollectionReference... how?

So I have a simple React Native app that I created using Expo and debug on my personal Android device.
I've included firebase/firestore into my app and am now trying to add an object to firestore on button click.
Here's my code:
firebaseConfig.js :
import { initializeApp } from '#firebase/app';
var config = {
...
}
const app = initializeApp(config);
export default app;
Component:
import { app } from '../firebaseConfig';
import { getFirestore } from 'firebase/firestore/lite';
import { doc, setDoc, collection, query, where, getDocs, initializeFirestore } from "firebase/firestore";
...
export default function Component() {
const firestoreDb = getFirestore(app);
// this function is called when clicking a button
const onAddListPress = () => {
setDoc(doc(firestoreDb, "cities", "LA"), {
name: "Los Angeles",
state: "CA",
country: "USA"
});
}
}
This throws the following error:
Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
This code above (in the onPress) is copied from the official firestore docs, here:
https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document
Does anyone have an idea why this does not work?

I suggest you edit your post and remove the firebaseConfig configuration keys, or delete your Firebase app and create a new one from the Firebase console to secure your app. I tried to replicate your application using React, and I received the same error message. There were two changes I made to correct the error. The first one is inside the firebaseConfig file, the default export needs to be changed to a named export:
import { initializeApp } from "firebase/app"
const firebaseConfig = {
//Project configuration keys
};
const app = initializeApp(firebaseConfig);
export { app }; // Change from a default to a named export
In addition, all the imports inside your component should come from the full Javascript SDK, not the lite version. The lite version has some limitations which can result in this specific error.
import { app } from "./firestore-config";
import { getFirestore, getDoc, doc } from "firebase/firestore";
import './App.css';
export default function App() {
const firestoreDB = getFirestore(app);
const docRef = doc(firestoreDB, "users", "testUser1");
const getData = async () => {
const data = await getDoc(docRef);
console.log(data);
}
getData();
return <div className="App"></div>;
}
You might also want to review this GitHub issue if you are using yarn to manage your dependencies.

How can I import firebase app as browser module import?

I am trying to import firebase app (8.0.2) on the client side without bundler.
I downladed the firebase-app.js from the CDN and host it on my server.
The goal is to have the firebase app module imported in one of my modules like this:
import firebase from '/vendor/firebase-app.js';
However, when trying to access firebase, I am getting an error about the default export not being defined. In firefox, this is:
Uncaught SyntaxError: import not found: default
Where am I wrong? Does the module import only work with a bundler?
I believe I have some fundamental misunderstanding, but I cant figure it out.
Thanks for the help!

As Doug comments, that syntax is intended for use with bundlers.
If you want to import the SDK inside a module script then you will need to use a CDN, like this:
useEffect(() => {
let isSubscribed = true
const initFirebase = async () => {
try {
const [{
initializeApp
},
{
getFirestore,
collection,
addDoc
}
] = await Promise
.all([
import('https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js'),
import('https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js')
])
const fireApp = initializeApp(firebaseConfig)
const appDB = getFirestore(fireApp)
if (isSubscribed) {
setFirebase(fireApp)
setDB(appDB)
setResult('success')
}
} catch (e) {
console.log(e);
setResult('error')
}
}
if (firebaseConfig) {
initFirebase()
.catch(e => {
console.log(e);
})
}
return () => is Subscribed = false
}, [firebaseConfig])
That's from a POC I'm working on, single HTML file, Preact + Firebase, no bundlers needed.
It is still a long way to be something and need validations, but it answers your question.
Here is the repo.

In Firebase "^9.9.4" use :
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {}
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app)