Could not find FirebaseUI widget error

Question

I am attempting to make a login screen using firebaseui auth for a single-page web app. I copied firebaseui's sample code to create the login screen:

<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>

Then I just inserted a

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

to load the login screen. The regular firebase stuff loads just fine, but the auth screen doesn't. Here is the error I got:

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

I couldn't find this error anywhere else online, and I'm not sure what it means or why it is appearing. What should I do to make the auth screen load?

Answer 1

The error is thrown from here: https://github.com/firebase/firebaseui-web/blob/cac4047490ed90b0d3d741d6deb8b28905f5db4b/javascript/widgets/authui.js#L481

Seems the html element cannot be found. Can you try to call document.querySelector('#firebaseui-auth-container'); from console to confirm the element exist on that page?

Answer 2

Your code sample:

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

contains inconsistent quotes, where the first is double, the second is single quotes. I believe you meant to code it as:

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

or

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