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

Question

I am working on a minimal (proof of concept) project with Preact and Firebase.

A single HTML file, bundler/transpiler free thanks to HTM as JSX replacement.

Here is the relevant code:

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

When firebaseConfig (JSON file) is loaded from an <input type="file"/> , it successfully imports initializeApp and getFirestore from the provided CDN.

But no matter if I use firebaseConfig data or directly the project id it returns:

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

This doesn't work either:

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

All is inside a <script type="module"> tag.

Answer 1

Problem solved.

I think the proxy variable initApp was causing the issue. I changed the way initializeApp was being imported, and it did the trick.

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