如何导入 firebase 应用程序作为浏览器模块导入？

Question

I am trying to import firebase app (8.0.2) on the client side without bundler. I downladed the firebase-app.js from the CDN and host it on my server.

The goal is to have the firebase app module imported in one of my modules like this:

import firebase from '/vendor/firebase-app.js';

However, when trying to access firebase, I am getting an error about the default export not being defined. In firefox, this is:

Uncaught SyntaxError: import not found: default

Where am I wrong? Does the module import only work with a bundler? I believe I have some fundamental misunderstanding, but I cant figure it out.

Thanks for the help!

Answer 1

As Doug comments, that syntax is intended for use with bundlers.

If you want to import the SDK inside a module script then you will need to use a CDN, like this:

useEffect(() => {
    let isSubscribed = 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 (isSubscribed) {
                setFirebase(fireApp)
                setDB(appDB)
                setResult('success')
            }
        } catch (e) {
            console.log(e);
            setResult('error')
        }
    }

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

    return () => is Subscribed = false
}, [firebaseConfig])

That's from a POC I'm working on, single HTML file, Preact + Firebase, no bundlers needed.

It is still a long way to be something and need validations, but it answers your question.

Here is the repo .

Answer 2

In Firebase "^9.9.4" use:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {}
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app)