在Create React App项目中集成FirebaseUI认证时遇初始化函数错误求助

I’ve run into this exact issue before when integrating FirebaseUI into a Create React App, so let’s break down what’s going wrong and how to fix it.

The Root Cause #

Your error happens because the version of FirebaseUI you’re using (3.0.0) expects Firebase to be available as a global object, but in Create React App’s ES module environment, the import * as firebase from 'firebase' syntax doesn’t expose Firebase globally. When FirebaseUI tries to call firebase.initializeApp internally, it can’t find the method—even though you’ve already initialized Firebase in your component.

Step-by-Step Fix #

1. Restructure Firebase Initialization
   First, move your Firebase config and initialization into a separate file (like src/firebaseConfig.js) to ensure it only runs once and makes Firebase accessible across your app:

// src/firebaseConfig.js
import firebase from 'firebase/app';
import 'firebase/auth'; // Only import the Firebase modules you need (reduces bundle size)

const dbConfig = {
  apiKey: "...",
  authDomain: "...",
  // Add your remaining config properties here
};

// Initialize Firebase only if no app instance exists already
if (!firebase.apps.length) {
  firebase.initializeApp(dbConfig);
}

export default firebase;

2. Update Your Login Component
   Now import the pre-initialized Firebase instance from your config file, and adjust how you set up FirebaseUI. Also, add cleanup logic to avoid memory leaks when the component unmounts:

import React, { Component } from 'react';
import firebase from './firebaseConfig';
import * as firebaseui from 'firebaseui';

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

class Login extends Component {
  // Store the FirebaseUI instance to clean it up later
  uiInstance = null;

  componentDidMount() {
    console.log("component mounted");
    // Initialize FirebaseUI with the pre-configured Firebase auth instance
    this.uiInstance = new firebaseui.auth.AuthUI(firebase.auth());
    this.uiInstance.start('#firebaseui-auth-container', uiConfig);
  }

  componentWillUnmount() {
    // Clean up the FirebaseUI instance to prevent duplicate initialization errors
    if (this.uiInstance) {
      this.uiInstance.delete();
    }
  }

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

export default Login;

3. Verify Dependencies (and Clean if Needed)
   Your Firebase (5.0.2) and FirebaseUI (3.0.0) versions are compatible, but sometimes duplicate or corrupted dependencies can cause issues. Run these commands to reset your dependencies:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Why This Works #

By initializing Firebase in a separate file and exporting the instance, we ensure FirebaseUI gets access to the same initialized Firebase object you’re using in your app. The cleanup in componentWillUnmount prevents issues where FirebaseUI tries to re-initialize on subsequent mounts of the Login component.

内容的提问来源于stack exchange，提问作者Egor