Web 应用程序控制台错误：firebase-auth.js:1 未捕获错误：无法实例化 firebase-auth - 请务必先加载 firebase-app.js答案

【问题标题】：Web App Console error: firebase-auth.js:1 Uncaught Error: Cannot instantiate firebase-auth - be sure to load firebase-app.js firstWeb 应用程序控制台错误：firebase-auth.js:1 未捕获错误：无法实例化 firebase-auth - 请务必先加载 firebase-app.js
【发布时间】：2019-01-12 05:43:41
【问题描述】：

我在 Firebase 中创建了一个网络应用项目。并添加了所有 Firebase 配置脚本，包括为项目提供的 api 密钥。我想使用 firebase 将 Google Sign-in 集成到网络应用程序中，并且我已遵循 Firebase Docs 提供的文档。但是谷歌登录按钮不起作用，一旦我加载 index.html，它就会在控制台上抛出这些错误。我已经尝试了所有方法来消除这些错误，但我找不到任何解决方案。请帮忙！

Firebase Web App Error

错误：

Cannot instantiate firebase-auth - be sure to load firebase-app.js first. 
Cannot instantiate firebase-database - be sure to load firebase-app.js first.
Cannot instantiate firebase-messaging- be sure to load firebase-app.js first. 
Cannot instantiate firebase-functions - be sure to load firebase-app.js first.

编辑1：

代码：

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-functions.js"></script>


<script>
  // Initialize Firebase
  var config = {
  apiKey: "************",
  authDomain: "*******.firebaseapp.com",
  databaseURL: "https://******.firebaseio.com",
  projectId: "**********",
  storageBucket: "****.appspot.com",
  messagingSenderId: "*************"
  };
  firebase.initializeApp(config);
</script>


<!-- Gmail Login Code START -->


<div style="text-align:center;">
  <button onclick = "googleSignin()">Google Signin</button>
  <button onclick = "googleSignout()">Google Signout</button>
</div>

<script>
var provider = new firebase.auth.GoogleAuthProvider();

function googleSignin() {
  firebase.auth().signInWithPopup(provider).then(function(result) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // ...
  }).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
}

function googleSignout() {
  firebase.auth().signOut().then(function() {
    // Sign-out successful.
  }).catch(function(error) {
    // An error happened.
  });
}

</script>

<!-- Gmail Login Code END -->

【问题讨论】：

请编辑问题以显示未按您期望的方式工作的相关代码。
你能分享你的代码吗？乍一看，这似乎是一些 firebase 配置问题。
@Doug Stevenson 好的。谢谢你的建议。
@Vito Madio 是的！
我将 firebas-app.js 移到 firebase.js 之后的下一行并清除了缓存。它部分解决了问题，我的控制台现在没有错误。但是 Google 登录仍然无法正常工作。谷歌登录窗口只是弹出并消失。我应该如何解决这个问题：/有人可以帮忙吗？请

标签： javascript firebase web-applications instantiation web-application-project

【解决方案1】：

这不是一个真正的答案，但帮助我解决这个问题的一点是 firebase-app、firebase-messaging 等具有相同的版本号。

【讨论】：

哈哈，瞬间帮到我了！谢谢。

【解决方案2】：

根据我的经验，对于 Firebase 身份验证，您需要以下 3 个脚本：

<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-auth.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.js"></script>

Firebase UI Reference

【讨论】：