title: How to initialize firebase in gatsby?
body: <p>I'm stuck on making firebase work in my gatsby application that uses Redux with Redux-sagas. I know about the existence of <code>firebase-sagas</code> but I'm trying to make without using it.</p>
  
  <p>I'm trying to init firebase auth by:</p>
  
  <pre><code>import * as firebase from 'firebase/app';
  import 'firebase/auth';
  
  export const app = firebase.initializeApp(
    {
      apiKey        : "apiKey",
      authDomain    : "project.firebaseapp.com",
      databaseURL   : "https://project.firebaseio.com",
      projectId     : "project",
      storageBucket : "project.appspot.com",
      appId         : "appId"
    }
  
  )
  
  export const authRef = () =&gt; app.auth(); //also tried: firebase.auth() and firebase.auth(app)
  //firebase.auth returns a function, but firebase.auth() throws error
  
  </code></pre>
  
  <p>I have the following config on my <code>gatsby-node.js</code>:</p>
  
  <pre><code>const path = require('path');
  
  exports.onCreateWebpackConfig = ({ actions, plugins, loaders, getConfig }) =&gt; {
    const config = getConfig()
  
    config.resolve = {
      ...config.resolve,
        mainFields: ['module', 'browser', 'main'],
        alias: {
          ...config.resolve.alias,
          ['firebase/app']       : path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js'),
          ['firebase/auth']      : path.resolve(__dirname, 'node_modules/firebase/auth/dist/index.cjs.js'),
        }
    }
  
    actions.replaceWebpackConfig(config)
  }
  </code></pre>
  
  <p>It trows the error:</p>
  
  <pre><code>{ [M [Error]: The XMLHttpRequest compatibility library was not found.]
    code: 'auth/internal-error',
    message: 'The XMLHttpRequest compatibility library was not found.' }
  </code></pre>
  
  <p>I think it's some problem related to webpack. I would love any insights on this problem :)</p>