I tried to work with firabase authentication using React but it says the error, "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')". If I use import * as firebase from "firebase/app" then rest off the code showing errors.

import firebase from 'firebase/app';
import 'firebase/auth';
    
const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
});
    
export const auth = app.auth();

export default app;

I tried to work with firabase authentication using React but it says the error, "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')". If I use import * as firebase from "firebase/app" then rest off the code showing errors.

import firebase from 'firebase/app';
import 'firebase/auth';
    
const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
});
    
export const auth = app.auth();

export default app;

• javascript
• reactjs
• firebase
• firebase-realtime-database
• firebase-authentication

• Please include more information about how you are integrating Firebase into your app, including the versions of any SDKs you've added to your package.json. We should have enough information in the question to duplicate the error as you see it. – Doug Stevenson Commented Aug 26, 2021 at 18:19

2 Answers 2

Firebase modular SDK (v9) is officially released and npm install firebase now installs this instead of the older namespaced version (v8). If you are using v9 then refactor your code to this:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getDatabase } from "firebase/database";

const app = initializeApp({...config});

export const auth = getAuth()
const database = getDatabase();

export { auth, database }

I'd remend following the documentation and continue using the new modular SDK. If you have an existing and want to use the existing namespaced version, then you can replace your imports with pat libraries as follows:

import firebase from 'firebase/pat/app';
import 'firebase/pat/auth';

firebase.initializeApp({...config})

const auth = firebase.auth()
const database = firebase.database()

Checkout this video from Firebase for getting started with v9.

use this import method

import { firebase } from 'firebase/app';

instead of

import firebase from 'firebase/app';