firebase export issue in react

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.

Craig Ayre · Answer 1 · 2017-10-23T11:01:41.300

2

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

edited Oct 23 '17 at 11:01

answered Oct 23 '17 at 10:56

Craig Ayre

1,133
9
12

if I am using export default firebaseApp = firebase.initializeApp(config); I am getting the error that firebaseApp is not defined – HexaCrop Oct 23 '17 at 10:58
oh..ok now I get it, you initialize it and then export it. – HexaCrop Oct 23 '17 at 10:59
Can we use it like, export default const firebaseApp = firebase.initializeApp(config); ?? – HexaCrop Oct 23 '17 at 11:00
1

You can't use that syntax for default exports, you can for named exports though. You don't have to assign the value to a variable since you're not using the value other than in the export, that's why `export default firebase.initializeApp(config)` works – Craig Ayre Oct 23 '17 at 11:01
When I'm try to get reference to database firebaseApp.database.child('contacts') I get following error.TypeError: undefined is not an object (evaluating '_firebase__WEBPACK_IMPORTED_MODULE_3__["default"].database.child') – Samsad CV Jan 02 '21 at 10:06

firebase export issue in react

1 Answers1