无法在html中的脚本模块中初始化firebase应用程序

Question

我正在研究一个最小的（概念验证）项目，并使用预告症和firebase进行。

一个html文件，bundler/transpiler免费，感谢 htm 作为JSX替代。

这是相关的代码：

            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])

当 firebaseconfig （json文件）是从＆lt; input type =“ file”/＆gt;加载的，它成功地导入了 pinitializeapp < /strong>和 getfirestore 来自提供的CDN。

但是，无论我是使用firebaseconfig数据还是直接返回的项目ID：

firebaseError：firebase.initializeapp中未提供的“ projectID”。

这也不起作用：

initapp（{projectID：{projectID： 'project-id'}）

全部都在＆lt; script type =“模块”＆gt;标签中。

Answer 1

问题解决了。

我认为代理变量 initapp 正在引起问题。
我改变了 initizeapp 的进口方式，这是一个技巧。

            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])