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

Question

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",
    ...
...

Answer 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.

Answer 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