title: Implicitly initializing firebase in a React app
body: <p>I'm attempting to combine <a href="https://firebase.google.com/docs/web/setup#reserved-urls" rel="nofollow noreferrer">implicit initialization</a> for Firebase and a React app (created using CRA) as it seems like a good way to ensure I don't need to worry too much about configuring for different environments.</p>
  
  <p>However, when running the app, if I make any attempt to use the <code>firebase</code> object I get the error <code>Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).</code></p>
  
  <p>My index file has the Firebase files included before the app files and if I put a breakpoint in the Firebase-provided <code>init</code> then I can see that it is initializing the <code>firebase</code> object. </p>
  
  <p><a href="https://i.stack.imgur.com/ePTJs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ePTJs.png" alt="enter image description here"></a></p>
  
  <p>The <code>App</code> component is the one that comes with the CRA boilerplate:</p>
  
  <pre><code>mport React from 'react';
  import firebase from 'firebase/app'
  import 'firebase/functions'
  
  import logo from './logo.svg';
  import './App.css';
  
  const App: React.FC = () =&gt; {
  
    const helloWorld = firebase.functions().httpsCallable('helloWorld')
    helloWorld().then(result =&gt; console.log({ result }))
  
    return (
    ...
  </code></pre>
  
  <p>Any pointers?</p>