'Cannot resolve module "firebase" from 'firebase.js' : Firebase could not be found within the project

I'm having issues getting firebase into this project and I'm really not sure what is going wrong? All the firebase code (except the project-specific config code) is exactly the same as another (working) project...

I'm Using react-native with expo and have the FB database as a web project.

I Initialize the database in a file called firebase.js on the root level of the project, it's sitting right next to app.js. Database doesn't have security rules yet so I removed some of the info but its what you would expect for an api key.

import * as firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = {
    apiKey: "removed for post",
    authDomain: "removed for post",
    databaseURL: "removed for post",
    projectId: "goalsdev-7eb67",
    storageBucket: "goalsdev-7eb67.appspot.com",
    messagingSenderId: "362368452051",
    appId: "removed for post",
    measurementId: "G-CNRGY3FTLE"
};

firebase.initializeApp(firebaseConfig);

export default firebase;

Then I try and use it like so...

import firebase from 'firebase'

this is in /screens/signUpFinal, have also tried importing as 'firebase.js', '../firebase' and '../firebase.js'

package.json is:

...
"dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-firebase/app": "^8.4.3",
    "@react-native-firebase/auth": "^9.2.3",
    ...
...

Solution 1:^[1]

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.

Solution 2:^[2]

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

Solution 3:^[3]

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.

Solution 4:^[4]

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

Solution 5:^[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Segun
Solution 4	Dharman
Solution 5	Shubhrajyoti Dey

'Cannot resolve module "firebase" from 'firebase.js' : Firebase could not be found within the project

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]