Firebase + Ошибка «Нет приложения», когда приложение реорганизовано в отдельные файлы

Question

Я пытаюсь реорганизовать свое веб-приложение React, чтобы сделать его более читабельным. Однако я сталкиваюсь с проблемой, когда кажется, что дочерние компоненты, похоже, не выдают ошибку «Нет приложения». Я считаю, что проблема в том, что учетные данные Firebase

Ключи: 1. Переменная «firebase», кажется, распознается дочерними компонентами в отдельных файлах, что означает, что эти файлы распознают переменную firebase, объявленную в родительском элементе. 2. Тем не менее, несмотря на инициализацию приложения в родительском файле, кажется, что учетные данные не передаются детям.

Я мог бы передать данные конфигурации в качестве реквизитов каждому компоненту и повторно инициализировать приложение в каждом компоненте, но ... это не выглядит элегантно или неправильно. Я также пытался создать отдельный файл инициализации и вызывать его в каждом дочернем компоненте, но это не помогло мне, и я не могу не думать, что должен быть более элегантный способ сделать это.

Также не помогает, что ошибка точно не указывает, где она происходит.

Код:

/* index.js, the main file */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style.css';

/*==============
Initialize firebase 
===============*/

// Я попытался поместить следующий код в свой собственный файл и // ссылка на него через импорт '../fileName', не работает

import firebase from 'firebase/app';
  import 'firebase/auth';
  import 'firebase/database';
  import 'firebase/firestore';
  import 'firebase/messaging';
  import 'firebase/functions';
  import 'firebase/storage';

  var config = {
      apiKey: "<API key hidden>",
      authDomain: "<App name>.firebaseapp.com",
      databaseURL: "https://<app name>.firebaseio.com",
      projectId: "<project>",
      storageBucket: "<project>.appspot.com",
      messagingSenderId: "<my sender id>"
    };

firebase.initializeApp(config);



/*============
Components
=============*/


//Content-addition-to-database components
import ChildComponent from './components/ChildComponent';


/*===========
*
* Begin App
*
============*/

export default class App extends React.Component{

... some code ...


render(){
return(
<div>
   <ChildComponent />
</div>
);

Дочерний код:

/ * ChildComponent.js * /

import React from 'react'

export default ChildComponent extends React.Component{
  //tried importing the aforementioned file '../
}

Получена ошибка:

firebase.js:1 Uncaught {code: "app/no-app", message: "Firebase: No Firebase App '[DEFAULT]' has been cre…- call Firebase App.initializeApp() (app/no-app).", name: "[DEFAULT]", stack: "[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' h…k (http://localhost:8080/transformed.js:52180:14)"}