Firebase-js-sdk: New 5.x component imports broken

[vincentwoo]

It seems like Firebase changed the surface of its top-level import module. Previously, this would work:

import * as firebase from 'firebase/app'
import 'firebase/database'

firebase.initializeApp(...)

Now, the object returned from importing firebase/app has everything that it used to provide scoped under the key "default", so you have to do:

import * as firebase from 'firebase/app'
import 'firebase/database'

firebase.default.initializeApp(...)

This seems like an oversight.

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[merlinnot]

Use

import firebase from 'firebase/app';
import 'firebase/database';

[paulstelzer]

As @merlinnot says and do not forget (if you are using TypeScript) to add

"allowSyntheticDefaultImports": true

to your tsconfig.json. After that, everythings keeps the same like before:

firebase.initializeApp(...)

[vincentwoo]

We should probably add this to the JS docs around where requireing packages is mentioned!

[bricepepin]

Using import firebase from '@firebase/app'; instead of import firebase from 'firebase/app'; avoid the need of "allowSyntheticDefaultImports": true for me.

[mmermerkaya]

Closing this as the issue seems to be resolved.

I think all our docs recommend the style @merlinnot mentioned. Please let us know if that's not the case.

For Typescript, I'd recommend turning on esModuleInterop instead of allowSyntheticDefaultImports. esModuleInterop implicitly turns on synthetic default imports, and has other benefits as well. The TypeScript team "highly recommends applying it both to new and existing projects". See TS 2.7 release notes for more information (search for "esModuleInterop", it's close to the bottom of the page).

[vincentwoo]

I think https://firebase.google.com/docs/web/setup#sdk_imports_and_implicit_initialization is a bit light on details for the analogous case in module importing