找不到FirebaseUI小部件错误

Question

我正在尝试使用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.

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

Answer 1

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

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

Answer 2

您的代码示例：

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

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

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

或者

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