无法在 HTML 中的脚本模块内初始化 Firebase APP

Question

我正在使用 Preact 和 Firebase 进行一个最小的（概念验证）项目。

单个 HTML 文件，由于 HTM 作为 JSX 替代品，bundler/transpiler 免费。

相关代码如下：

            useEffect(() => {
                let isSuscribed = true
                const initFirebase = async () => {

                    let initApp = initializeApp || (await import('https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js')).initializeApp
                    if (!initializeApp) {
                        setInitializeApp(initApp)
                    }


                    let getDB = getFirestore || (await import('https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js')).getFirestore
                    if (!getFirestore) {
                        setGetFirestore(getDB)
                    }

                    const fireApp = initApp(firebaseConfig)
                    const appDB = getDB(fireApp)

                    if (isSuscribed) {
                        setFirebase(fireApp)
                        setDB(appDB)
                    }
                }
                if (firebaseConfig)
                    initFirebase()
                        .catch(e => {
                            console.log(e);
                        })

                return () => isSuscribed = false
            }, [firebaseConfig])

当从 <input type="file"/> 加载 firebaseConfig（JSON 文件）时，它成功导入 initializeApp 和从提供的 CDN 中获取 Firestore。

但不管我是使用firebaseConfig数据还是直接使用项目id returns:

FirebaseError: "projectId" not provided in firebase.initializeApp.

这也不行：

initApp({ projectId: 'project-id' })

所有内容都在 <script type="module"> 标签内。

Answer 1

问题已解决。

我认为代理变量 initApp 导致了这个问题。我改变了 initializeApp 的导入方式，它成功了。

            useEffect(() => {
                let isSuscribed = true
                const initFirebase = async () => {
                    try {
                        const [
                            { initializeApp },
                            { getFirestore, collection, addDoc }
                        ] = await Promise
                            .all([
                                import('https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js'),
                                import('https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js')
                            ])

                        const fireApp = initializeApp(firebaseConfig)
                        const appDB = getFirestore(fireApp)

                        if (isSuscribed) {
                            setFirebase(fireApp)
                            setDB(appDB)
                            setResult('success')
                        }
                    } catch (e) {
                        console.log(e);
                        setResult('error')
                    }
                }

                if (firebaseConfig) {
                    initFirebase()
                        .catch(e => {
                            console.log(e);
                        })
                }

                return () => isSuscribed = false
            }, [firebaseConfig])

无法在 HTML 中的脚本模块内初始化 Firebase APP

Not able to Initialize Firebase APP inside script module in HTML

javascript

firebase

reactjs

preact