error: firebase.initializeApp is not a function

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”

[quantuminformation]

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

[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 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.