firebase.auth is not a function

[kierangilliam]

I'm using Firebase in a project. I believe there is some issue when using nollup and the firebase imports: import 'firebase/auth' and import 'firebase/analytics'. When I run the following with nollup I get the error:

Uncaught (in promise) TypeError: firebase.auth is not a function

<script lang='ts'>
    import { onMount } from 'svelte'
    import * as firebase from 'firebase/app'
    import 'firebase/auth'
    import 'firebase/analytics'
    import { Authorization } from '@state'
    import { authInitialized } from './utils'

    const config = {
        ...
    }

    onMount(async () => {
        firebase.initializeApp(config)
        $authInitialized = true

        firebase.auth().onAuthStateChanged(function(user) {
            firebase.analytics()
            let idToken 

            if (user) {
                idToken = user.getIdToken.toString()
            } 

            $Authorization = idToken ? `Bearer ${idToken}` : null
        });
    })
</script>

However, when I run using plain rollup, I do not get this error. Any ideas?

[PepsRyuu]

Can you provide a reproducible example? Just trying it out, and I'm getting the same result between Nollup and Rollup.

For the code to work, you should switch from namespace import to default import for firebase/app. It doesn't export any named properties at all.

import firebase from 'firebase/app';

[PepsRyuu]

Upon further digging, this seems to be some weird documentation / TypeScript problem with Firebase:

firebase/firebase-js-sdk#3315 (comment)
firebase/firebase-js-sdk#1832
firebase/firebase-js-sdk#1008 (comment)

Not entirely sure what's going on, but it sounds like their documentation assumes you're using TypeScript, and that TypeScript has a different behaviour for resolving namespace imports. I think TypeScript has a flag that allows the namespace import to work even though it's a default export. Very weird and goes against the ESM spec.

[kierangilliam]

Here's a minimal example. Run yarn dev for normal rollup, and yarn dev:nollup for nollup.

Rollup will throw an error because there's no config, but it loads firebase correctly.

[PepsRyuu]

Running dev for Rollup doesn't show me anything but "Cannot GET /" :(

[PepsRyuu]

Closing as the original issue was with Firebase's documentation.