[Solved]-Cannot resolve module "firebase" from 'firebase.js' : Firebase could not be found within the project-Reactjs

cd src from project file inside src do npm install firebase,i was facing same issue, but this solution sorted my problem.

google has updated firebase from version 8 to modular web sdk. for this reason if you are using firebase@>9.0.0 then it will be a bit different. in the firebase.js file you need to import firebase like this.

import firebase from "firebase/compat/app";

so a sample of your firebase.js will look like this

import firebase from "firebase/compat/app";
import { firebase_config } from "./constants/firebase";
import "firebase/compat/storage";

firebase.initializeapp(firebase_config);
export const storage = firebase.storage();
export default firebase;

here firebase_config is your firebase configuration

as shown in the example use this storage object in other files. as here i used this storage to other functions and worked on its functionalities like upload files etc.

i haven't tried with other services like authentication but at least firebase-storage service worked for me

the last time i had to install firebase was over 6 months ago and that was "firebase": "^8.6.2". the configuration looked something like;

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/messaging';
import 'firebase/analytics';
import {
api_key,
auth_domain,
database_url,
project_id,
storage_bucket,
messaging_sender_id,
app_id,
measurement_id,
messaging_vapid_key,
} from '../config';

const config = {
 apikey: api_key,
 authdomain: auth_domain,
 databaseurl: database_url,
 projectid: project_id,
 storagebucket: storage_bucket,
 messagingsenderid: messaging_sender_id,
 appid: app_id,
 measurementid: measurement_id,
};

// initialize firebase app with configurations
firebase.initializeapp(config);

// setup firestore
const analytics = firebase.analytics();
const database = firebase.firestore();
const storage = firebase.storage();

// setup push messaging
let messaging = null;
if (firebase.messaging.issupported()) {
  messaging = firebase.messaging();
  messaging.usepublicvapidkey(messaging_vapid_key);
}

export {
  firebase, storage, messaging, analytics, config, database as default,
};

as of the time of posting this, firebase is at v9 and a lot has changed. kindly refer to the official doc here

for help with setting up firebase on a project.

i found that this is the best/easiest way to use in react.js with no problem ....you can try to import like this ( "firebase": "^9.6.1",) :

        import firebase from 'firebase/compat/app';
        import 'firebase/compat/auth';
        import 'firebase/compat/firestore';

create your configfile .....

    const firebaseconfig = { your config data ...};

and then you can use it in this way without any annoying error :

    const firebaseapp = firebase.initializeapp(firebaseconfig);

    const db = firebaseapp.firestore();

    const auth = firebase.auth();

    const provider = new firebase.auth.googleauthprovider();

i hope it can help for others who have the same problem i had

first run

npm install --save firebase

and instead of this:

import * as firebase from "firebase"

use this:

import * as firebase from "firebase/app";

source: https://firebase.google.com/docs/web/setup#node.js-apps

and also this:

import firebase from 'firebase'

to this:

import firebase from '../firebase'

and remove @react-native-firebase libraries because they won't work with expo.