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