I'm getting init error in project that firebase app 'DEFAULT' is initialized, call initializeApp etc. from the basic example of usage firebase/auth I tried to debug it and copied source files from your project directly and error disappear. Probably it is something with how package manager work with contexts in your package but dont know actually

I get this error:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

//index.tsx

/* @refresh reload */
import { render } from 'solid-js/web';

import { FirebaseProvider } from 'solid-firebase';
import type { FirebaseOptions } from 'firebase/app';

import './index.css';
import App from './App';

const firebaseConfig: FirebaseOptions = {
  apiKey: 'xxx',
  authDomain: 'xxx,
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
};

render(
  () => (
    <FirebaseProvider config={firebaseConfig}>
      <App />
    </FirebaseProvider>
  ),
  document.getElementById('root') as HTMLElement
);

//App.tsx

import { Component, Match, Switch } from 'solid-js';
import { useFirestore } from 'solid-firebase';
import { collection, getFirestore } from 'firebase/firestore';

const App: Component = () => {
  const db = getFirestore();
  const test = useFirestore(collection(db, 'test'));

  return (
      <Switch>
        <Match when={test.loading}>
          <p>Loading...</p>
        </Match>
        <Match when={test.error}>
          <p>An error occurred.</p>
        </Match>
        <Match when={test.data}>{JSON.stringify(test)}</Match>
      </Switch>
  );
};

export default App;

Im having issues trying to install this using npm or pnpm, futhermore I get a 404 if I try to browse the pacakge on NPM https://www.npmjs.com/package/solid-firebase

Hi,

I just wanted to give praise and applause for this great open-source project! I am currently migrating a complex app which uses Nextjs + React + Firebase Auth to Astro + Solidjs and your project helped a lot! It is shocking how small the footprint is in terms of kilobyte to download.

Thanks a lot and please keep the project as lean and small as possible (modularized?) because at least in my use case the reason to move from React to Solid was to stop having these super huge Javascript codebases a frontend has to download.

So thanks again and feel free to close the issue since it is not an issue 😬❤️

This makes it such that when using these in nested components, i.e.:

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

function App() {
    return <GuardedByAuth>
        <Route path='/profile' component={Profile} />
    </GuardedByAuth>
}

function GuardedByAuth() {
  const state = useAuth(auth)

  return (
    <Switch>
      <Match when={state.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={state.error}>
        <Login />
      </Match>
      <Match when={state.data}>
        <Profile />
      </Match>
    </Switch>
  )
}

Do not get into a loading state again and do not have to handle it, i.e.:

function Profile() { 
    const data = useAuth(auth); // not loading, since user already authenticated.
   return <div>data.user.name</div>
}

After my original issue with FirebaseProvide not working (see #4), I resorted to just using the const app = initializeApp(firebaseConfig); in my class, but now I'm encountering a different kind of issue that seems to be related to the firebase implementation (might be due to firebase's breaking changes). Note: using Astro.

Both

const share = useFirestore(collection(db, 'shares'));

and

const share = useFirestore(doc(db, 'shares/'+shareid));

Yield the same error in the code below.

Code (Media.tsx file):

import { Switch, Match } from 'solid-js';
// import { render } from 'solid-js/web'
import { initializeApp } from 'firebase/app'
import { FirebaseProvider, useFirestore } from 'solid-firebase'
import { doc, getFirestore } from 'firebase/firestore';
// import { firebaseInstance } from '../services/global_state';


const firebaseConfig = {...}

export default function Media({ userid, shareid }) {
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  // const share = useFirestore(collection(db, 'shares'));
  const share = useFirestore(doc(db, 'shares/'+shareid));

  return (
    <>
      <div class="media">
          <Switch children="">
            <Match when={share.loading} children="">
              <p>Loading...</p>
            </Match>
            <Match when={share.error} children="">
              <p>An error occurred.</p>
            </Match>
            <Match when={share.data} children="">
              {JSON.stringify(share)}
            </Match>
          </Switch>
        </div>
    </>
  );
}

Error

node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[FirebaseError: Expected type 'Query', but it was: a custom DocumentReference object] {
  code: 'invalid-argument',
  customData: undefined,
  toString: [Function (anonymous)]
}

Firebase should be installed as a dependency in the app using this package and then here only used as a peerDependency, otherwise you can get 2 instances of firebase which cause further issues.

Hello. Thank you for this library, I am really enjoying it. I was wondering if you will accept a PR to add a hook to use paginated queries. With the current primitives of this library is not possible, and I ended creating my own by modifying the useFirestore hook this library has.

I think we should agree on the API then I can create a PR if you want. Regards