firebaseui-web: 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.

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”

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 21
Comments: 24 (4 by maintainers)

Commits related to this issue

Using default attribute of Firebase require statement if available fixes #392 — committed to firebase/firebaseui-web by deleted user 6 years ago
Using default attribute of Firebase require statement if available (#398) * Using default attribute of Firebase require statement if available fixes #392 * Add typeof — committed to firebase/firebaseui-web by nicolasgarnier 6 years ago
Workaround for firebase-ui nr 392 https://github.com/firebase/firebaseui-web/issues/392 — committed to sne11ius/egghead.space by sne11ius 6 years ago

Most upvoted comments

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

+34

quantuminformation on Dec 23, 2019

@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 May 15, 2018

This works for me:

import firebase from "firebase-admin"; firebase.initializeApp({...})

sgup on Nov 30, 2020

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 May 11, 2018

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 May 15, 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.

sprzedwojski on Jun 1, 2018

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

mdrideout on May 16, 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 May 11, 2018