我只是在Build your first web app with firebase中学习Google Developers Pathways教程，现在我已经到了第6步。每当我点击RSVP按钮测试注册时，按钮都没有响应，就像firebase UI注册不能显示在浏览器的对话框中一样。我当然遵循了所有的步骤和代码。
我尝试在按钮中使用inspect元素，但显示了如下所示的错误
preview-f4664a6cfd526d580909b.js:1 [2021-09-04T13:11:04.250Z] @firebase/auth: Auth (9.0.0): INTERNAL ASSERTION FAILED: Expected a class definition
console.<computed> @ 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 (<anonymous>)
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)这是我的HTML代码
<head>
<meta charset="utf-8">
<title>Firebase Meetup</title>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400,700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
<!-- <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/firestore.png?alt=media&token=56d039dc-4a6c-477b-a153-a4bb8234646f" /> -->
<!-- <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/hosting.png?alt=media&token=57c8adb6-08c4-43f7-9395-4c299896a36c" /> -->
<img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/codelab.png?alt=media&token=f45f808c-ce40-4b34-944c-8d8fac00e13d" />
<section id="event-details-container">
<h1>Firebase Meetup</h1>
<p><i class="material-icons">calendar_today</i> October 30</p>
<p><i class="material-icons">location_city</i> San Francisco</p>
<!-- ADDED RVSP BUTTON -->
<button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<section id="description-container">
<h2>What we'll be doing</h2>
<p>Join us for a day full of Firebase Workshops and Pizza!</p>
</section>
<section id="guestbook-container">
</section>
</div>
</body>
<script type="module">
// 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);
</script>下面是我的Javascript代码
// 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', () => {
ui.start('#firebaseui-auth-container', uiConfig);
});
}
main();
1条答案
按热度按时间dsekswqp1#
我正在回答我自己的问题，当我注意到即使我按照步骤操作，我也尝试运行firebase提供的示例代码，当时它工作。但突然当我尝试刷新应用程序并再次单击RVSP按钮时，firebase UI不再显示。我回去阅读说明，它说：“您不希望页面刷新，因为你正在构建一个单页的网络应用程序。”这提醒我们，我们首先应该理解。