score:0

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

score:0

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

score:1

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.

score:3

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

score:9

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.


Related Query

More Query from same tag