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>
  );
}

[CreedDE]

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')
);