How do I fix this error TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function

Question

I am using Firebase with next.js and I have the files set up like below. I am trying to use the firebase client side sdk but it does not seem to be working on the sign up.

Firebase.js where the firebase app is initialized

import firebase from 'firebase/app'
import 'firebase/auth'
const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID
};

export default function initFirebase() {
  if (!firebase.apps.length) {
    
    firebase.initializeApp(config)
  }
}

The function which is erroring on the sign up paenter code herege.

import Firebase from "../../components/firebase/Firebase";

    Firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
                            // Handle Errors here.
                            
                           
                          });

Answer 1

You didn't export anything from Firebase.js called auth . That's what the error message is trying to tell you. If you don't export it, you can't access it after an import.

If you want to access the auth() function from the global firebase namespace, consider exporting it:

export function auth() {
    return firebase.auth();
}

Then you can import it in another source file:

import { auth } from "../../components/firebase/Firebase";
auth().createUserWithEmailAndPassword(...);

In general, you should avoid using default exports as you're using now. It's far better to name each export individually. You can also consider exporting the entire firebase namespace if you want to expose the entire SDK.

Answer 2

I think the issue with your Firebase.js module is that you're exporting your initFirebase function rather than firebase itself.

Try changing that bottom section to:

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export default firebase;

PS When I first saw your post, I was hung up on a seemingly similar problem of my own causing me to overlook this export issue when I made my comments. I should have caught this export issue earlier. This is my lesson to myself about not jumping to conclusions.