Upgrade to Firebase JS 8.0.0: Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase')

Issue

After upgrading to 8.0.0, I get the following error:

Attempted import error: ‘initializeApp’ is not exported from ‘firebase/app’ (imported as ‘firebase’).

My import looks like this:

import * as firebase from "firebase/app"
firebase.initializeApp({ ... })

TypeScript also complains:

Property ‘initializeApp’ does not exist on type ‘typeof import("/path/to/my/file")’. ts(2339)

How do I fix this?

Solution

In version 8.0.0, the Firebase SDK had a breaking change in the way it handles exports:

Breaking change: browser fields in package.json files now point to ESM
bundles instead of CJS bundles. Users who are using ESM imports must
now use the default import instead of a namespace import.

Before 8.0.0

import * as firebase from 'firebase/app'

After 8.0.0

import firebase from 'firebase/app'

Code that uses require('firebase/app') or require('firebase') will
still work, but in order to get proper typings (for code completion,
for example) users should change these require calls to
require('firebase/app').default or require('firebase').default. This
is because the SDK now uses typings for the ESM bundle, and the
different bundles share one typings file.

So, you will have to use the new ESM bundle default export:

import firebase from "firebase/app"
firebase.initializeApp({ ... })

If you are working with SDK version 9.0, read this question instead:

Answered By – Doug Stevenson

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.