Closed curiosbasant closed 2 years ago
@CuriosBasant does this error still happen if you import from firebase/firestore
and firebase/auth
instead of the @firebase
versions? From the @firebase/firestore
npm page:
This package is not intended for direct usage, and should only be used via the officially supported firebase package.
If it's still an issue with the main packages, please let us know.
This error is still there, when I first start the application. After doing few refreshes it gets automatically resolved (just randomly). :(
@CuriosBasant This is what I did to avoid this error message:
function FirebaseComponents({ children }: { children: React.ReactNode }) {
const app = useFirebaseApp(); // a parent component contains a `FirebaseAppProvider`
const auth = getAuth(app);
const { status, data: firestoreInstance } = useInitFirestore(
async (firebaseApp) => {
const db = initializeFirestore(firebaseApp, {});
return db;
}
);
if (status === "loading") {
return <div>Loading Firestore...</div>;
}
if (process.env.NODE_ENV !== "production") {
connectAuthEmulator(auth, "http://localhost:9099");
connectFirestoreEmulator(firestoreInstance, "localhost", 8080);
}
return (
<AuthProvider sdk={auth}>
<FirestoreProvider sdk={firestoreInstance}>{children}</FirestoreProvider>
</AuthProvider>
);
}
@angelroma - is there a working example of how you got this to work? I get the same error.
Also ran into the same issue trying to connect an emulator
const app = useFirebaseApp();
const auth = getAuth(app);
const firestore = getFirestore(app);
if (process.env.NODE_ENV !== 'production') {
// Set up emulators
if (!auth.emulatorConfig) {
connectAuthEmulator(auth, 'http://localhost:9099');
}
connectFirestoreEmulator(firestore, 'localhost',8080);
}
It may be a limitation in how connectFirestoreEmulator is working, and/or Im not super in depth with each of the application lifecycles. I was able to resolve my issue @shalomsam / @CuriosBasant by wrapping the setup in use effect to await for component init on app
const app = useFirebaseApp();
const auth = getAuth(app);
const firestore = getFirestore(app);
useEffect(() => {
if (process.env.NODE_ENV !== 'production') {
// Set up emulators
if (!auth.emulatorConfig) {
connectAuthEmulator(auth, 'http://localhost:9099');
}
connectFirestoreEmulator(firestore, 'localhost',8080);
}
}, [app])
I believe this is more an issue with firebase than reactfire
@aageorge @shalomsam This is what I'm currently doing to get rid of this issue, as @angelroma's solution didn't work for me.
import { app, auth, firestore } from "../firebase/client"
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<FirebaseAppProvider firebaseApp={app}>
<FirebaseSDKProviders>
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
</FirebaseSDKProviders>
</FirebaseAppProvider>
)
}
function FirebaseSDKProviders({ children }) {
return (
<AuthProvider sdk={auth}>
<FirestoreProvider sdk={firestore}>{children}</FirestoreProvider>
</AuthProvider>
)
}
And in "../firebase/client.ts"
import { getApp, getApps, initializeApp } from "firebase/app"
import { connectAuthEmulator, getAuth } from "firebase/auth"
import { connectFirestoreEmulator, getFirestore } from "firebase/firestore"
import { __DEV__ } from "../constants"
if (!getApps().length) {
const app = initializeApp({
// firebase project options
})
const auth = getAuth(app),
firestore = getFirestore(app)
if (typeof window != "undefined" && __DEV__) {
console.info("Dev Env Detected: Using Emulators!")
const firebaseConfig = require("../../firebase.json")
if (auth.emulatorConfig?.host !== "localhost")
connectAuthEmulator(auth, `http://localhost:${firebaseConfig.emulators.auth.port}`, {
disableWarnings: true,
})
// @ts-ignore
if (!firestore._settings?.host.startsWith("localhost"))
connectFirestoreEmulator(firestore, "localhost", firebaseConfig.emulators.firestore.port)
}
}
export const app = getApp()
export const auth = getAuth(app)
export const firestore = getFirestore(app)
make sure that u're using firebase/firestore or firebase/firestore/lite in all your firebase imports, is u' can't get data from db using both libs, for example if you:
import { getFirestore } from "firebase/firestore"; the need the correct imports import { deleteDoc, doc, getDoc, getDocs, onSnapshot, updateDoc } from "firebase/firestore"; but if you import { deleteDoc, doc, getDoc, getDocs, onSnapshot, updateDoc } from "firebase/firestore/lite"; the error Expected type 'xxxx', but it was: a custom Firestore object appears in your app.
So, use only one lib, it works for me
@usuarez Yes I'm totally aware of that. And I can confirm that is not the case. To solve it, I had to create a separate file, initialise all the sdk's there, and then importing and passing them to the SDK Providers. As you can see in my above comment
@usuarez hei thanks for pointing to this issue, this was the mistake for me... Why in the world autoimport works in first place for firebase/../lite
folder but not for the main folder ... thanks I was already giving up on this---
@usuarez Thanks! I had this issue because of that too
@usuarez's comment https://github.com/FirebaseExtended/reactfire/issues/490#issuecomment-1066208615 about mixing firestore
and firestore/lite
is one possible cause.
Another is by accidentally importing two different versions of the firestore
library. This is called the dual package hazard and happens when different dependencies use different versions of the same package due to bundler setup. ReactFire 4.2.2 has a new build process that should lower the chance of this happening.
Version info
React: 17.0.2
Firebase: 9.5.0
ReactFire: 4.2.1
Other (e.g. Node, browser, operating system) (if applicable): Node16, Chrome, MacOS
Steps to reproduce
I'm using nextjs, in the
pages/_app.tsx
paste the following codeExpected behavior
I should be able to connect to the emulator, without any error
Actual behavior
Right now it is giving me this error, "FirebaseError: Expected type 'Firestore$1', but it was: a custom Firestore object"