Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Enable direct ad-hoc imports

Open
  • Is something wrong?
#480 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
firebase, react, react-native, typescript
Domain
developer-experience, frontend, mobile

Research direction

Start by reproducing the IDBIndex error in a new Expo app using the listed React Native, Reactfire, and Firebase versions, then inspect how Reactfire exports its providers. Done means consumers can import only the needed component, such as FirebaseAppProvider, without loading unrelated functionality or triggering the error.

Written by the indexing model from the issue text.

Description

v5

Can't find variable: IDBIndex when setting up on Expo

I used the same hierarchy I had working on the web. I am not using performance or analytics, so I think all of the underlying components should work.

But, I believe that since there isn't a way (that I can tell) to import only specific components, I end up with an error as if I were importing performance package.

import React from 'react'
import { getAuth, connectAuthEmulator } from 'firebase/auth'
import { getFunctions, connectFunctionsEmulator } from "firebase/functions"
import { getStorage, connectStorageEmulator } from "firebase/storage"
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { FirebaseAppProvider, useFirebaseApp, AuthProvider, StorageProvider, FirestoreProvider } from 'reactfire';

function FirebaseComponents({ children }) {
  const app = useFirebaseApp() // a parent component contains a `FirebaseAppProvider`
  const auth = getAuth(app)
  const functions = getFunctions(app)
  const firestoreInstance = getFirestore(app)
  const storage = getStorage(app)

  return (
    <AuthProvider sdk={auth}>
      <FirestoreProvider sdk={firestoreInstance}>
        <StorageProvider sdk={storage}>
            {children}
        </StorageProvider>
      </FirestoreProvider>
    </AuthProvider>
  );
}

function AllFirebaseComponents({ children, fire }) {
    return (
        <FirebaseAppProvider firebaseApp={fire} >
          <FirebaseComponents>
            {children}
          </FirebaseComponents>
        </FirebaseAppProvider>
    )
  }

export default AllFirebaseComponents
Version info

"react": "^17.0.2",
"react-native": "~0.63.4",
"reactfire": "^4.2.0",
"firebase": "^9.0.1",

Test case

TBU, will try to get one of these

Steps to reproduce

Start a new expo app, attempt to use reactfire. Get error mentioned above.

Expected behavior

Be able to import only the components needed, ex:

import FirebaseAppProvider from 'reactfire/FirebaseAppProvider';
Actual behavior

I get the error mentioned above which I think comes from the performance stuff

Dominant language
TypeScript
Stars
3.6k
Forks
403
Avg merge
4d 19h
Merged PRs (30d)
11

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from FirebaseExtended/reactfire

All issues in FirebaseExtended/reactfire

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.