Error: SDK not found. useSdk must be called from within a provider

[grojas123]

Hi Team I think I setup the SDK

function Photos({ children }) { const app = useFirebaseApp(); // a parent component contains a `FirebaseAppProvider` const auth = getAuth(app); const [user] = useUserState(); const { id } = useParams(); const photosmetada = { user: user, gameid: id, }; //const messagesmetadaform = { // user: user, // gameid: id //}; //console.log(messagesmetadaform) // any child components will be able to use `useUser`, `useDatabaseObjectData`, etc return ( <AuthProvider sdk={auth}> <DatabaseProvider sdk={database}> <Uploadphotos/> <Displayphotos photosmetada={photosmetada}/> </DatabaseProvider> </AuthProvider> ); }``` And the code of Displayphotos is ```function Displayphotos(photosmetada) { if (typeof (photosmetada.photosmetada.user) !== 'undefined') { var gameid = photosmetada.photosmetada.gameid; } const storage = useStorage(); const photoRef = ref(storage, 'images/010/237-536x354.jpg'); const { status, data: imageURL } = useStorageDownloadURL(photoRef); var database = useDatabase(); var querypath = '/photos/' + gameid; const photosRef = refdatabase(database, querypath); const objectlistofimages = useDatabaseListData(photosRef); if (status === 'loading') { return <span>loading...</span>; } return <img src={imageURL} alt="game NSYL" />; } 

But I got the message Error: SDK not found. useSdk must be called from within a provider
What I am doing wrong here ?

[epodol]

Hi @grojas123,

It looks like you only have a provider for Auth and Database. In your Displayphotos component, you are using useStorage(), but you do not have a provider for storage yet. Try doing the same thing you did with Auth and Database but add StorageProvider.

[grojas123]

Thank you let me check

[grojas123]

I used this example to setup the StorageProvider

function FirebaseServices({ children }) { const app = useFirebaseApp(); const firestore = getFirestore(app); const auth = getAuth(app); const storage = getStorage(app); return ( <FirestoreProvider sdk={firestore}> <StorageProvider sdk={storage}> <AuthProvider sdk={auth}>{children}</AuthProvider> </StorageProvider> </FirestoreProvider> ); } 

[thmoee]

I wanna test a bit with firebase and the storage on my Nextjs App.
Each time i visit the route where im testing the firebase storage, i get the error: Error: SDK not found. useSdk must be called from within a provider

Thats my code of the page that im visiting for testing.

import { useStorage, useStorageDownloadURL } from 'reactfire'; import { ref } from 'firebase/storage'; export function Setups() { const storage = useStorage(); const testRef = ref(storage, 'Setups/il0n5yecjakf1tisly9se8_bmw_zolder_race'); const { status, data } = useStorageDownloadURL(testRef); return ( <> <p>Hello World from Setups Component</p> </> ); }

Thats how i setup the Providers:
_app.tsx

<FirebaseAppProvider firebaseConfig={firebaseConfig}> <FirebaseSDKProviders> <Component {...pageProps} /> </FirebaseSDKProviders> </FirebaseAppProvider>

firebase-provider.tsx

import { FirestoreProvider, useFirebaseApp } from 'reactfire'; import { getFirestore } from 'firebase/firestore'; import { ChildrenProps } from './children-props'; export function FirebaseSDKProviders({ children }: ChildrenProps) { const app = useFirebaseApp(); const firestore = getFirestore(app); return <FirestoreProvider sdk={firestore}>{children}</FirestoreProvider>; }

firebase.ts

export const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY, authDomain: process.env.FIREBASE_AUTH_DOMAIN, projectId: process.env.FIREBASE_PROJECT_ID, storageBucket: process.env.FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, appId: process.env.FIREBASE_APP_ID, measurementId: process.env.FIREBASE_MEASUREMENT_ID }

Is there something that im missing?

[grojas123]

Yes pls remember you need to setup Firebase in the react env . This is in index.js .
In my case :

const firebaseConfig = { apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", authDomain: "example.com", databaseURL: "https://example.com", projectId: "XXXXX", storageBucket: "example.com", messagingSenderId: "XXXXX", appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", measurementId: "XXXXXXXXXXXXXX" }; ReactDOM.render( <BrowserRouter> <FirebaseAppProvider firebaseConfig={firebaseConfig}> <App /> </FirebaseAppProvider> </BrowserRouter>, document.getElementById('root') );