通过CDN模块导入FirebaseUI后无法使用，求排查解决方法

问题根源 #

你使用的FirebaseUI 6.1.0版本CDN脚本不是ES模块格式，它加载后会把firebaseui对象挂载到全局window对象上，而非通过ES模块的export导出内容。当你用import * as firebaseui导入该脚本时，得到的是一个空对象（因为脚本没有任何导出项），自然无法访问firebaseui.auth这类属性，导致报错。

而直接在HTML中引入脚本后能正常运行，是因为此时window.firebaseui已存在，页面模块脚本可以直接访问这个全局对象。

解决方法 #

要在单独JS文件中实现功能，有两种可行方式：

方式一：依赖全局对象（适配你当前的旧版本） #

1. 在HTML中先引入FirebaseUI脚本，再引入你的模块脚本：

<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<script type="module" src="./your-auth-script.js"></script>

2. 在your-auth-script.js中直接使用全局的firebaseui对象，无需额外导入：

// 直接调用全局的firebaseui对象
const ui = new firebaseui.auth.AuthUI(authInstance);
// 后续配置代码示例
ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // 其他配置项
});

方式二：升级到支持ES模块的FirebaseUI版本（可选） #

如果想使用ES模块导入，可以升级到v9及以上版本的FirebaseUI，它提供了ES模块格式的CDN链接。示例代码如下：

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
import { getAuth } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js';
import * as firebaseui from 'https://www.gstatic.com/firebasejs/ui/9.23.0/firebase-ui-auth.js';

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 初始化FirebaseUI
const ui = new firebaseui.auth.AuthUI(auth);
// 后续配置...

注意：升级版本后，Firebase的API调用方式会从命名空间式转为模块化，需要同步调整相关代码。

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