React + Firebase app duplicate error

background

www.youtube.com

3years agoの wesのrepositoryと解説を頼ってfirebase + Reactのcrudを作ろうとした．

jQで掲示板もどきを作った時とは違うfirebaseの使い方，config fileを噛ませる
やり方になっている．

Frond End のReactのstateのところではうまくいったが，Firebaseとの接続で
この動画のとうりにやると，

Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

のErrorが出てしまった．

cause

nextで上がっているこのissueは関係なかった．

github.com

2018年のこの記事のコードと差分をとって原因が判明した．

qiita.com

原因は App.jsのナカでfirebase.initializeApp(config);をしていたのと
firebaseのdatabaseを使っていたことだろう．

2020現行verではApp本体でinitするのはダメになっているようだ．
またfirebaseにdatabaseが無くなって，firestoreになっている．

なのでwesの該当コードを次のように書き直した．

code (in src/)

Config/config.js (BEFORE)

export const DB_CONFIG = {
  apiKey: "-hoge",
  authDomain: "hogehoge.firebaseapp.com",
.........
};

最初はfirebaseのget web appからとってきた値を変数に入れてexportするだけで
initはApp側でやらせていた．これを

Config/config.js (AFTER)

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  apiKey: "-hoge",
  authDomain: "hogehoge.firebaseapp.com",
.........
};
const firebaseApp = firebase.initializeApp(config);
export const firestore = firebaseApp.firestore();

firebase, firestoreをconfig内でimportしてきて，
configでinitしたものにfirestoreも噛ませてexportする．

App.js (BEFORE)

import { DB_CONFIG } from './Config/config';
import firebase from 'firebase/app';
import 'firebase/database';

class App extends Component {

  constructor(props){
    super(props);
    this.app = firebase.initializeApp(DB_CONFIG);
    this.database = this.app.database().ref().child('notes');
.................

従来はconfig のkeyとかをそのまま変数に入れてexportしてきたものを
DB_CONFIGとしてimportしてこちらでinitしていたが，それではエラーが出るので
config.js側でinitをするようにした．

またどうもfirebaseのversionが変わってdatabaseがfirestoreという名称に
なったようなので，databaseを使うのをやめた．

AFTER

import { firestore } from './Config/config';
import firebase from 'firebase/app';
import 'firebase/firestore';

class App extends Component {
  constructor(props) {
    super(props);
    this.app = firebase.app();
    this.db = firebase.firestore();
    console.log(this.db);

firestoreという名前にしてinitが住んでfirestoreもかまされたものをconfigからimport
firebase/databaseをやめてfirebase/firestoreを持ってきた

これでconsole.logすると

t {GT: FirebaseAppImpl, zT: t, INTERNAL: {…}, KT: t, XT: "[DEFAULT]", …}
hm: (...)
app: FirebaseAppImpl
GT: FirebaseAppImpl {firebase_: {…}, isDeleted_: false, name_: "[DEFAULT]", automaticDataCollectionEnabled_: false, options_: {…}, …}
zT: t {Qr: Promise, Wr: false, jr: Array(0), Kr: null, Gr: false, …}
INTERNAL: {delete: ƒ}
KT: t {projectId: "note-app0902", database: "(default)"}
XT: "[DEFAULT]"
ZT: t {currentUser: t, I: true, R: 1, u: null, m: ƒ, …}
tm: n {}
em: t {host: "firestore.googleapis.com", ssl: true, credentials: undefined, timestampsInSnapshots: true, cacheSizeBytes: 41943040, …}
sm: t {serializer: t, Pa: ƒ}
__proto__: Object

が入っているので，これで接続が直せた！！