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

user_10534453 0
Viewed 14045

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",
    ...
...
firebase react-native reactjs javascript
5 Answers

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.

user_26719010

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

user_178162520

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.

user_114321230

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

user_180743820

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

user_124838490
Related