react native e-library app error-failed to resolve dependency 'firebase'

Question

I am in the middle of creating a simple library app. Here, I am trying to use firestore database in firebase console. I am coding this on the expo snack editor. It does not work. here is a screenshot of the error in the snack editor:

These 2 lines are definitely causing the error:

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

PS this is the firebase version 9 sdk

this is my package.json in snack editor:

EDIT: I forgot to mention that this exact code on snack is working fine in VS Code locally. to get a working example of code locally: go to this link: https://snack.expo.dev/@rpshende/e-library-app

Then,

1. Extract the folder
2. cd to the folder in terminal
3. run command 'npm install'
4. then run command 'expo start'(make sure expo cli is installed for this to work!)
5. when the expo developer tools are fired up, press 'W' on the terminal to open project in a web browser

EDIT: i think this is a problem with the snack editor itself.....

Answer 1

Firebase v9 is Different

try this

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth, GoogleAuthProvider , signInWithPopup, } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "AIzaTyD2Jp9aB7ycUbW1z8QyPLmD111rHezHcOw",
  authDomain: "delete-project-c7021.firebaseapp.com",
  projectId: "delete-project-c7021",
  storageBucket: "delete-project-c7021.appspot.com",
  messagingSenderId: "688102987186",
  appId: "1:688102987186:web:e27537ggg7abc2b86b982b"
};

const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth();

Answer 2

As @whitehatcoder says, in the expo bubble editor there are version differences. Firebase should have been on version 8 instead of 9.

I add that you try this { "dependencies": { "firebase": "8.8.1" } }