Firebaseui-web: error: firebase.initializeApp is not a function

Created on 11 May 2018 · 24Comments · Source: firebase/firebaseui-web

I'm trying to use the firebaseUI library for authentication in a react app made with create-react-app. It works great in a standard html/js app but I can't get it to work with react.

here is my simple login component:

import React, { Component } from 'react'
import * as firebase from 'firebase'
import firebaseui from 'firebaseui'

const dbConfig = {
  apiKey: ...,
  authDomain: ...,
  ...
}
firebase.initializeApp(dbConfig)

const uiConfig = {
  signInFlow: 'popup',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
}

class Login extends Component {

  componentDidMount() {
    console.log("component mounted")
    var ui = new firebaseui.auth.AuthUI(firebase.auth())
    ui.start('#firebaseui-auth-container', uiConfig)
  }

  render() {
    return (
      <div id="firebaseui-auth-container"></div>
    )
  }
}

export default Login

All the firebase stuff works until I try to initialize the firebaseUI widget using new firebaseui.auth.AuthUI(firebase.auth()) which is when it throws an error saying firebase.initializeApp is not a function. Problem seems to be stemming from node_modules/firebaseui/dist/npm.js:340 where initializeApp gets called.

screen shot 2018-05-11 at 1 07 13 pm

Anyone else experienced this behavior (and hopefully resolved it)?

Here are my firebase dependancies btw:

"firebase": "^5.0.2",
"firebaseui": "^3.0.0"

Source

ee92

👍20

Most helpful comment

Turns out I had to do this instead:
firebase.default.initializeApp(firebaseConfig);

quantuminformation on 23 Dec 2019

👍19 🎉2

All 24 comments

having exactly the same error - can create the instance of firebase, but can't pass it to the firebase ui component. seems like people previously had this issue but their solutions didn't apply to my case

julientregoat on 11 May 2018

I didn't see these React firebase components before, but they're working for me instead of using this method

https://github.com/firebase/firebaseui-web-react

julientregoat on 11 May 2018

This is an issue with firebase-js-sdk. I have encountered issues with it in 5.0.2 which worked after switching back to 5.0.1.

bojeil-google on 11 May 2018

👍5

I'm getting signInWithCredential failed: First argument "credential" must be a valid credential. when I use the react-firebaseui component.

Which version on firebase are you using?

* 5.0.1 is working for with firebaseui but giving same 'credential' problem as the react-firebaseui component.
** 4.13.0 works with both thanks @julientregoat @bojeil-google

ee92 on 11 May 2018

@ee92 I was having that issue for a moment. I reinstalled firebase at 4.12.0 and now it appears to be working

julientregoat on 11 May 2018

👍1

Just released v3.0.4 of react-firebaseui that now depends on the latest major versions of firebase and firebaseui. I've restricted the peer dependency of firebase to v5.0.0 and v5.0.1 because of the webpack issue. I'll change that whenever the next minor version has the fix.

nicolasgarnier on 15 May 2018

I wasn't able to reproduce the signInWithCredential failed: First argument "credential" must be a valid credential. issue you guys mentioned with v5.0.1 but if you are able to with the new build please file an issue on https://github.com/firebase/firebaseui-web-react

nicolasgarnier on 15 May 2018

I had the same error with nuxt.js.
I could solve this issue to add the following lines to webpack config

config.resolve.alias['firebase/app'] = __dirname + '/node_modules/firebase/app/dist/index.cjs.js'

Before adding these lines, webpack loads '~/node_modules/firebase/app/dist/index.esm.js'

ishiijp on 15 May 2018

I've seen the same issue with the firebaseui widget giving the error Uncaught TypeError: firebase.initializeApp is not a function. As far as I can see, this is is a result of webpack's module semantics. Specifically, when firebaseui/dist/npm.js is loaded by webpack, the module import statement firebase=require('firebase/app') pulls in the es2015 module firebase/app/dist/index.esm.js.

Since firebase/app/dist/index.esm.js exports firebase using export default, webpack's semantics expects clients to access the firebase object by require('firebase/app').default.

I don't know what the right solution here is, but I suspect doing something like wrapping the two require calls in firebaseui/dist/npm.js in the usual interopDefault might work. This needs to be done in firebaseui-web/gulpfile.js.

For the moment, I'm working around this issue by loading firebase/app/dist/index.esm.js with babel rather than webpack, and using babel's add-module-exports plugin. I've put together a hacky demonstration of this issue and the work-around in https://github.com/mnehpets/firebaseui-webpack. In that code, the workaround is disabled by default, so opening dist/login.html results in Uncaught TypeError: firebase.initializeApp is not a function. If you enable the babel loader in lines 19-21 of webpack.conf.js, the login widget works once again.

mnehpets on 15 May 2018

@jshcrowthe FYI.

I think the issues is coming from the mixed use of both the ESM and CJS imports of the firebase library.

In react projects for instance, many developers will use ESM imports:

import firebase from 'firebase/app';

but, in the same project, they will import firebaseui which contains:

var firebase = require('firebase/app');

The issue here is that webpack will only load firebase once and because ESM was used in the project it will load @firebase/app/dist/index.esm.js which is has a slightly different API than index.cjs.js (the difference is that index.esm.js has the SDK under the default attribute).

One possible workaround for firebaseui is to fallback to .default if available directly in npm.js. I've sent a PR for this in #398

Alternatively developers can add the following to their project's webpack config:

      {/* Workaround for issue https://github.com/firebase/firebaseui-web/issues/392 */},
      {
        test: /npm\.js$/,
        loader: 'string-replace-loader',
        include: path.resolve('node_modules/firebaseui/dist'),
        query: {
          search: 'require(\'firebase/app\');',
          replace: 'require(\'firebase/app\').default;',
        },
      },

Other way to fix this for everyone would be to have a default self reference to the firebase SDK in index.cjs.js kinda exports.default = exports;

Not sure if there is a much better way to handle this. In https://github.com/webpack/webpack/issues/6584 @sokra says both CJS and ESM should export the same API. Although it's nicer to use directly the way firebase has done it but it's true that it complicates things for webpack (it's not efficient to import the same library twice), we won't avoid mixed uses of require and import.

nicolasgarnier on 15 May 2018

👍7

Thanks for the solution, Nicolas!
Small fix for the webpack workaround:

      {
        test: /npm\.js$/,
        loader: 'string-replace-loader',
        include: path.resolve('node_modules/firebaseui/dist'),
        options: {
          search: 'require(\'firebase/app\');',
          replace: 'require(\'firebase/app\').default;',
        },
      },

invernizzi on 15 May 2018

🎉1

Very cool, but CRA

shawnmitchell on 15 May 2018

@invernizzi 's webpack code worked for me. Just needed to remember to install "string-replace-loader".

mdrideout on 16 May 2018

👍1

To those who got this work, was the fix placing this in webpack.config.js as so?

module.exports = {
        test: /npm\.js$/,
        loader: 'string-replace-loader',
        include: path.resolve('node_modules/firebaseui/dist'),
        options: {
          search: 'require(\'firebase/app\');',
          replace: 'require(\'firebase/app\').default;',
     },
},

potatowave on 16 May 2018

Any solution for a create-react-app project where I cannot modify the webpack config?
For now I've downgraded firebase to 4.12.0 and react-firebaseui to 1.2.3 and it works, but it would be best to use the latest versions in the long run.