Firebase-js-sdk: Getting error after hot module reloading: Overwriting FirebaseError base field "name" can cause unexpected behavior.

[MillouwMills]

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);

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[mmermerkaya]

Error is caused by this line. By using name as the app name in the template, we're also overwriting this field which should always be "FirebaseError".

Quick solution: Rename the field in the template to something like appName.
Best solution: Move template data under a new data field in FirebaseError.

[MillouwMills]

So it's a firebase-based error/bug?

[mmermerkaya]

Yeah, sorry. :smile:

You can ignore that warning for now.

[masterDoomX]

I also have this error in nuxt.js app. I call firebase.initializeApp(config); and everything is right, but the error happens.

[willvlad]

Same error here - on nextjs

[7korobi]

Same error here - on nuxt.js

[EspPromotor]

with firebase 6.3.5, the problem disappeared