error: firebase.initializeApp is not a function

[ee92]

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.

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

Here are my firebase dependancies btw:

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

[julientregoat]

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]

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

[bojeil-google]

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.

[ee92]

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

[julientregoat]

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

[nicolasgarnier]

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]

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

[flybae]

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'

[mnehpets]

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.

[nicolasgarnier]

@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 webpack/webpack#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.

[invernizzi]

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;',
        },
      },

[shawnmitchell]

Very cool, but CRA