Javascript 错误网络请求在Firebase上失败，使用ReactJS

我正在学习ReactJS，我想按照一个小指南在Firebase上试用它。我必须在Firebase中使用Google auth登录，但我总是遇到以下错误：

错误身份验证/网络请求失败：发生网络错误（例如超时、连接中断或主机无法访问）

import React，{Component}来自'React'；
从“firebase”导入firebase；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
handleAuth（）{
const provider=new firebase.auth.GoogleAuthProvider（）；
firebase.auth（）.signInWithPopup（提供程序）
.then（result=>console.log（`${result.user.email}ha iniciado sesión`）
.catch（error=>console.log（`error${error.code}:${error.message}`））；
}
render（）{
返回(
反应

使用谷歌登录

);
}
}
导出默认应用程序；

使用从firebase复制的数据初始化firebase.initializeApp（）。

---

谢谢。

好的，ReactDOM.render（）之前的index.js中的

firebase.initializeApp（）在哪里；我把它移到应用程序组件内部的
componentDidMount
，解释得很糟糕。那么你是如何解决这个问题的？
import React, { Component } from 'react';
import firebase from 'firebase';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  handleAuth() {
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider)
      .then(result => console.log(`${result.user.email} ha iniciado sesión`))
      .catch(error => console.log(`Error ${error.code}: ${error.message}`));
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>ReactGIFs</h2>
        </div>
        <p className="App-intro">
          <button onClick={this.handleAuth}>Login with Google</button>
        </p>
      </div>
    );
  }
}

export default App;