Firebase Web Codelab RSVP按钮点击无响应且报auth is not a function错误求助

问题原因 #

你遇到的报错是根本原因，和是否脱离Stackblitz环境无关，核心是Firebase SDK版本和FirebaseUI版本不兼容：
你当前使用的是Firebase v9+的模块化SDK，而你引入的FirebaseUI是4.0.0旧版本，旧版FirebaseUI仅兼容v8及更早的命名空间式Firebase SDK，会主动调用firebase.initializeApp().auth()这种已废弃的写法，因此触发类型错误，导致main函数执行到创建AuthUI实例时直接中断，后续的RSVP按钮点击事件监听逻辑根本没有执行，所以点击按钮无响应。

解决步骤 #

1. 升级FirebaseUI到v6.0及以上版本，该版本开始兼容Firebase v9+模块化API。如果是用npm/yarn管理依赖，直接执行npm i firebaseui@latest即可。
2. 删除index.html中旧版本FirebaseUI样式的引入行：

<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />

3. 在index.js的导入区域新增FirebaseUI样式的导入：

import 'firebaseui/dist/firebaseui.css';

4. （可选优化）Firebase初始化时显式传入app实例到getAuth，避免后续多实例场景出错：

const app = initializeApp(firebaseConfig);
auth = getAuth(app);

修改完成后重新运行即可，点击RSVP按钮会正常弹出登录表单。

内容的提问来源于stack exchange，提问作者Geolev