title: Firebase UI cannot show up in a button while building a simple web app
body: <p>I'm just following a tutorial on Google Developers Pathways in <a href="https://firebase.google.com/learn/pathways/firebase-web?hl=en" rel="nofollow noreferrer">Build your first web app with firebase</a> and I'm at the <a href="https://firebase.google.com/codelabs/firebase-get-to-know-web?continue=https%3A%2F%2Ffirebase.google.com%2Flearn%2Fpathways%2Ffirebase-web%3Fhl%3Den%23codelab-https%3A%2F%2Ffirebase.google.com%2Fcodelabs%2Ffirebase-get-to-know-web#5" rel="nofollow noreferrer">Step 6</a>. And whenever I test the signing up by clicking the RSVP button, the button would not respond, like the firebase UI sign-up can't show up on the browser's dialog box. I certainly follow all the steps and codes all over.</p>
  <p>I try to use the inspect element in the button and something a kind of error shows like this</p>
  <pre><code>preview-f4664a6cfd526d580909b.js:1 [2021-09-04T13:11:04.250Z]  @firebase/auth: Auth (9.0.0): INTERNAL ASSERTION FAILED: Expected a class definition
  console.&lt;computed&gt; @ preview-f4664a6cfd526d580909b.js:1
  assert.ts:243 Uncaught (in promise) Error: INTERNAL ASSERTION FAILED: Expected a class definition
      at debugFail (assert.ts:243)
      at debugAssert (instantiator.ts:1)
      at _getInstance (instantiator.ts:48)
      at Array.map (&lt;anonymous&gt;)
      at _initializeAuthInstance (location.ts:1)
      at eval (register.ts:77)
      at Component.eval [as instanceFactory] (register.ts:79)
      at Provider.getOrInitializeService (provider.ts:351)
      at Provider.initialize (provider.ts:257)
      at new Auth (auth.ts:108)
  </code></pre>
  <p>Here is my HTML Code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Firebase Meetup&lt;/title&gt;
    &lt;link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" /&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400,700&amp;display=swap"
      rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
  
      &lt;!-- &lt;img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/firestore.png?alt=media&amp;token=56d039dc-4a6c-477b-a153-a4bb8234646f" /&gt; --&gt;
      &lt;!-- &lt;img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/hosting.png?alt=media&amp;token=57c8adb6-08c4-43f7-9395-4c299896a36c" /&gt; --&gt;
      &lt;img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/codelab.png?alt=media&amp;token=f45f808c-ce40-4b34-944c-8d8fac00e13d" /&gt;
  
      &lt;section id="event-details-container"&gt;
        &lt;h1&gt;Firebase Meetup&lt;/h1&gt;
  
        &lt;p&gt;&lt;i class="material-icons"&gt;calendar_today&lt;/i&gt; October 30&lt;/p&gt;
        &lt;p&gt;&lt;i class="material-icons"&gt;location_city&lt;/i&gt; San Francisco&lt;/p&gt;
  
        &lt;!-- ADDED RVSP BUTTON --&gt;
        &lt;button id="startRsvp"&gt;RSVP&lt;/button&gt;
  
      &lt;/section&gt;
  
      &lt;hr&gt;
  
      &lt;section id="firebaseui-auth-container"&gt;&lt;/section&gt;
  
      &lt;section id="description-container"&gt;
        &lt;h2&gt;What we'll be doing&lt;/h2&gt;
        &lt;p&gt;Join us for a day full of Firebase Workshops and Pizza!&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="guestbook-container"&gt;
      &lt;/section&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script type="module"&gt;
    // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
  
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "AIzaSyDj4RNohGUdcRR1slvgZdUVNbKJ2odJkNc",
    authDomain: "fir-web-codelab-398dd.firebaseapp.com",
    projectId: "fir-web-codelab-398dd",
    storageBucket: "fir-web-codelab-398dd.appspot.com",
    messagingSenderId: "390940575886",
    appId: "1:390940575886:web:5fc4e675e08423b59a21df"
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my Javascript Code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Import stylesheets
  import './style.css';
  // Firebase App (the core Firebase SDK) is always required
  import { initializeApp } from 'firebase/app';
  
  // Add the Firebase products and methods that you want to use
  import { getAuth, EmailAuthProvider } from 'firebase/auth';
  import {} from 'firebase/firestore';
  
  import * as firebaseui from 'firebaseui';
  
  // Document elements
  const startRsvpButton = document.getElementById('startRsvp');
  const guestbookContainer = document.getElementById('guestbook-container');
  
  const form = document.getElementById('leave-message');
  const input = document.getElementById('message');
  const guestbook = document.getElementById('guestbook');
  const numberAttending = document.getElementById('number-attending');
  const rsvpYes = document.getElementById('rsvp-yes');
  const rsvpNo = document.getElementById('rsvp-no');
  
  let rsvpListener = null;
  let guestbookListener = null;
  
  let db, auth;
  
  async function main() {
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: 'AIzaSyDj4RNohGUdcRR1slvgZdUVNbKJ2odJkNc',
      authDomain: 'fir-web-codelab-398dd.firebaseapp.com',
      projectId: 'fir-web-codelab-398dd',
      storageBucket: 'fir-web-codelab-398dd.appspot.com',
      messagingSenderId: '390940575886',
      appId: '1:390940575886:web:5fc4e675e08423b59a21df'
    };
    // Initialize Firebase
    initializeApp(firebaseConfig);
    auth = getAuth();
  
    // const app = initializeApp(firebaseConfig);
  
    // FirebaseUI config
    const uiConfig = {
      credentialHelper: firebaseui.auth.CredentialHelper.NONE,
      signInOptions: [
        // Email / Password Provider.
        EmailAuthProvider.PROVIDER_ID
      ],
      callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
          // Handle sign-in.
          // Return false to avoid redirect.
          return false;
        }
      }
    };
  
    const ui = new firebaseui.auth.AuthUI(auth);
  
    // Listen to RVSP button clicks
    startRsvpButton.addEventListener('click', () =&gt; {
      ui.start('#firebaseui-auth-container', uiConfig);
    });
  }
  main();</code></pre>
  </div>
  </div>
  </p>