找不到 FirebaseUI 小部件错误答案

【问题标题】：Could not find FirebaseUI widget error找不到 FirebaseUI 小部件错误
【发布时间】：2018-10-31 08:11:44
【问题描述】：

我正在尝试使用 firebaseui auth 为单页 Web 应用程序制作登录屏幕。我复制了 firebaseui 的示例代码来创建登录屏幕：

<script src="/__/firebase/init.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.css" />
  <script type="text/javascript">
  // FirebaseUI config.
  var uiConfig = {
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID
    ]
  };

  // Initialize the FirebaseUI Widget using Firebase.
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  // The start method will wait until the DOM is loaded.
  ui.start('#firebaseui-auth-container', uiConfig);
</script>

然后我只是插入了一个

<div id="firebaseui-auth-container'></div>

加载登录屏幕。常规的 firebase 内容加载得很好，但身份验证屏幕却没有。这是我得到的错误：

Uncaught Error: Could not find the FirebaseUI widget element on the page.

我在网上其他任何地方都找不到此错误，我不确定它的含义或出现的原因。我应该怎么做才能使身份验证屏幕加载？

【问题讨论】：

标签： javascript firebase authentication web-applications firebaseui

【解决方案1】：

从这里抛出错误：https://github.com/firebase/firebaseui-web/blob/cac4047490ed90b0d3d741d6deb8b28905f5db4b/javascript/widgets/authui.js#L481

似乎找不到 html 元素。您可以尝试从控制台调用document.querySelector('#firebaseui-auth-container'); 以确认该元素存在于该页面上吗？

【讨论】：

hmm... 我刚刚尝试再次执行整个操作，现在它可以工作了。我不知道为什么，但它现在没有抛出任何错误并且加载得很好。无论如何感谢您的帮助！
Ti，我刚刚尝试过，它返回 null。我不经常得到这个，但它在我们的哨兵日志中出现了很多。我还能做些什么来帮助调试它？
@JamesBritton 您是否在 html 中添加了 firebaseui 容器标签？您必须告诉 firebaseui 在哪里呈现小部件。
@TiWang 我正在使用Firebase UI Web React，我不相信它会提到它，所以我认为它已经实现了。想知道我是否需要重新考虑这个设计决定。

【解决方案2】：

您的代码示例：

<div id="firebaseui-auth-container'></div>

包含不一致的引号，其中第一个是双引号，第二个是单引号。我相信您的意思是将其编码为：

<div id="firebaseui-auth-container"></div>

或

<div id='firebaseui-auth-container'></div>

【讨论】：