firebase export issue in react [duplicate]

Question

I have a file named firebase.js. It contains the following code:

import * as firebase from 'firebase';

const config = {
    apiKey: "some_random_key",
    authDomain: "some_random_authDomain",
    databaseURL: "some_random_databaseURL",
    projectId: "some_random_projectId",
    storageBucket: "some_random_bucket",
    messagingSenderId: "some_random_Id"
};

export const firebaseApp = firebase.initializeApp(config);

Now I am importing this in my index.js React file as below;

import firebaseApp from './firebase'

This gives me the following error:

./src/index.js
13:0-11 "export 'default' (imported as 'firebaseApp') was not found in './firebase'

and if I change my import statement to:

import {firebaseApp} from './firebase'

it's working fine. I know this is related to javascript but can you please explain me the concept here.

Answer 1

You are exporting a named export fireBase from firebase.js. This means that you have to use the curly brace syntax specifying the name of your export.

To export a default export use

export default firebase.initializeApp(config)
// or if you prefer to assign the result to a variable before exporting
const firebaseApp = firebase.initializeApp(config)
export default firebaseApp

This allows you to import your default export and call it what you wish, e.g. import firebaseApp from './firebase' or import foo from './firebaseApp