Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Firebase Error: export 'default' (imported as 'firebase') was not found in 'firebase/compat/app' (module has no exports)

I recently upgraded Firebase to 10.12.4 and now have this error which isn’t allowing me to compile.

import firebase from 'firebase/compat/app';
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/firestore";
import "firebase/compat/storage";


const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx",
};

firebase.initializeApp(firebaseConfig);

firebase.firestore().settings({ experimentalForceLongPolling: false, cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED, merge: true });

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

This has worked with no problems in the past – but am wondering why it now throwing this error, and how to fix it?

Tags:

2

Answers


  1. 0

    Since Firebase v9, they’ve moved all their packages to a Modular structure. You should import the necessary methods to from the right modules. According to the documentation, I can see that you’re doing the wrong imports.

    To initialize your Firebase app you can do the following:

    import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Upon checking, I can also see since you’re using compat exports you can initialize your app as following too:

    import initializeApp from "firebase/compat/app";

const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Given that, I suppose you’re using the official Firebase library – if you’re just not sure you can install the Firebase dependencies using the

    npm i firebase

    Check the full documentation here.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    The new firebase documentations suggests upgrading from namespace API to modular API.
    You can check the documentation on firebase docs.

    import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import { getFirestore } from "firebase/firestore";


//similarly for auth
import { getAuth, GoogleAuthProvider } from 'firebase/auth'

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY ,
  databaseURL: process.env.DATABASE_URL,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

const auth = getAuth(app);

const db = getFirestore(app);

const googleProvider = new GoogleAuthProvider();

export {app, database, auth};

    Be sure to add credentials in the environment file.

    And If you still need to use the compat version, I didn’t found firebase/compat/app on npmjs available packages. Try using firebase/app-compat, firebase/firestore-compat, firebase/auth-compat, etc.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search