Getting error after hot module reloading: Overwriting FirebaseError base field “name” can cause unexpected behavior.

Environment

  • Operating System version: macOS 10.13.6
  • Browser version: 75.0.3770.90 (Official Build) (64-bit)
  • Firebase SDK version: 6.2.0
  • Firebase Product: app

Problem

Get a warning after hot reloading my app w/ react-hot-loader and hot(App)
Extract of console output:

  • (index.cjs.js:652) Overwriting FirebaseError base field “name” can cause unexpected behavior.
  • ./node_modules/@firebase/util/dist/index.cjs.js.ErrorFactory.create @ index.cjs.js:652
  • initializeApp @ index.cjs.js:327
  • ./node_modules/@firebase/app/dist/index.cjs.js.firebaseNamespace.initializeApp @ index.cjs.js:495
  • initFirebaseApp @ index.js:6
  • App @ App.js:16
  • safeReactConstructor…

Relevant Code:

./src/firebase/index.js (loader)

import { initializeApp } from "firebase/app";
import firebaseConfig from "./config";

// load and apply firebase config
export default function initFirebaseApp(appName) {
  let app =  initializeApp(firebaseConfig, appName);
}

export { firebaseConfig };

./src/App.js (extract) (loader caller)`

import { hot } from "react-hot-loader/root";
import React from "react";
import debug from "debug";
import ...

import AppContext from "./AppContext";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.firebaseApp = initFirebaseApp(firebaseConfig.projectId);

    this.logger = debug(firebaseConfig.projectId);
    this.logger.log = console.log.bind(console);

    this.state = {
      ...
    };
  }

  componentWillUnmount() {
    // TODO: look up app.database.ref(...).off()

    firebase
      .delete(this.firebaseApp)
      .then(() => {
        console.log("App deleted successfully");
      })
      .catch(error => {
        console.log("Error deleting firebase app:", error);
      });
  }

  render() {
    return (
      <div>
        <AppContext.Provider
          value={...}
        >
          <Header />
          <main>
            ...
          </main>
        </AppContext.Provider>
      </div>
    );
  }
}

export default hot(App);

1 possible answer(s) on “Getting error after hot module reloading: Overwriting FirebaseError base field “name” can cause unexpected behavior.