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?

score 13 · Accepted Answer · answered May 28 '18 at 05:26

13

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?

answered May 28 '18 at 05:26

Ti Wang

775
4
9

hmm... I just tried doing the whole thing again, and now it works. I have no idea why, but it isn't throwing any errors now and it loads nicely. Thank you for the help anyways! – Nameer Hirschkind May 28 '18 at 18:49
Ti, I have just tried that and it returned null. I don't get this too often, but it comes up quite a bit in our Sentry logs. Is there anything else I can do to help debug it? – James Britton Jul 26 '18 at 14:40
@JamesBritton Did you add the firebaseui container tag in your html? You have to tell firebaseui where to render the widget. – Ti Wang Jul 26 '18 at 17:11
1

@TiWang I am using [Firebase UI Web React](https://github.com/firebase/firebaseui-web-react) which I don't believe mentions adding that, so I assume it's already implemented. Wondering if I need to rethink this design decision. – James Britton Aug 06 '18 at 14:15

score 5 · Answer 2 · answered Nov 21 '18 at 03:02

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>

Could not find FirebaseUI widget error

2 Answers2