Why isn't my firebase config working? - firebase

Question

I'm trying to modularize my code as best as I can. If sharing my App.js on github or something, I don't want to have to keep deleting the id's, I'd rather just include it on a separate file and just .gitignore it.
For some reason, my app is just really not liking the way I'm doing it and I'm having a tough time working around it. Any idea what I'm doing wrong?
This is my App.js file:
import firebase from 'firebase';
import {
apiKey,
authDomain,
databaseURL,
storageBucket,
messagingSenderId
} from './constants/Keys';
class App extends Component {
constructor(props) {
super(props);
this._navContext = initNavigationContext();
}
componentWillMount() {
const config = {
apiKey,
authDomain,
databaseURL,
storageBucket,
messagingSenderId
};
firebase.initializeApp(config);
}
render() {
return (
<Provider store={Store}>
<NavigationProvider context={this._navContext}>
<StackNavigation navigatorUID="root" id="root" initialRoute={Router.getRoute('auth')} />
</NavigationProvider>
</Provider>
);
}
}
export default App;
I've omitted the other import statements for here.
Here is my Keys file:
const apiKey = '//////';
const authDomain = '//////';
const databaseURL = '//////';
const storageBucket = '//////';
const messagingSenderId = '//////';
const facebookAppID = '//////';
export default {
apiKey,
authDomain,
databaseURL,
storageBucket,
messagingSenderId,
facebookAppID
};
Any idea what I'm doing wrong here?

Answer 1

I think your problem is that you are trying to destructure the default export, and what ES6 modules do is use destructuring for named exports. If your imported values have all undefined, it is likely the case. You can do the following:
export const apiKey = '//////';
export const authDomain = '//////';
export const databaseURL = '//////';
export const storageBucket = '//////';
export const messagingSenderId = '//////';
export const facebookAppID = '//////';
And then it should work.