Firebase-js-sdk: Type definitions no longer work after updating from 4.8.0 to 4.8.1

[buu700]

[REQUIRED] Describe your environment

• Operating System version: OS X El Capitan and Debian Stretch
• Firebase SDK version: 4.8.1
• Firebase Product: app, auth, database, storage

[REQUIRED] Describe the problem

Steps to reproduce:

Install firebase and try to use it with TypeScript 2.5.3, TypeScript 2.6.2, or Angular CLI.

Relevant Code:

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';

let balls: firebase.app.App;

Build fails with error TS2503: Cannot find namespace 'firebase'. (red squiggly under the firebase immediately after balls).

Edit: This may be related to or the same issue as #387. However, I do see @firebase/app-types and a bunch of other @firebase packages correctly installed, so I dunno.

[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.

[myspivey]

4.8.1 was a refactor of the typings and you now pull your imports from @firebase:

import { FirebaseApp } from '@firebase/app-types';
import { FirebaseAuth } from '@firebase/auth-types';
import { FirebaseDatabase } from '@firebase/database-types';
import { FirebaseMessaging } from '@firebase/messaging-types';
import { FirebaseStorage } from '@firebase/storage-types';
import { FirebaseFirestore } from '@firebase/firestore-types';

[buu700]

Thanks! It seems like there's a lot that really needs to be documented, but that helped resolve the issues for me.

[jtsom]

@myspivey That seems like a nasty breaking change for a .0.1 release! And without any docs too. Not good! Especially as it breaks Angularfire2.

[alexfung888]

@myspivey where do I find auth()?
In 480, I wrote for example:

    const auth = firebase.auth();
    auth.fetchProvidersForEmail(mail).then(p => { console.log(p); });
    auth.sendPasswordResetEmail(mail).then(() => {

in 481, I can't find auth() in FirebaseApp or FirebaseAuth. Do you know of any sample Angular program that we can refer to to see how to reference firebase?

[kksharma1618]

This change was really surprising for a patch version bump. Here are the following things I had to do to make it work (documenting here in case it helps someone):

// include firebase core
import * as firebase from 'firebase/app'
// include services that you want
import 'firebase/auth'
import 'firebase/database'
// servervalue timestamp is here
import { ServerValue } from '@firebase/database'
// types are in these packages
import { FirebaseApp } from '@firebase/app-types'
import { FirebaseAuth } from '@firebase/auth-types'
import { DataSnapshot, Reference, FirebaseDatabase } from '@firebase/database-types'

const app: FirebaseApp = firebase.initializeApp(options)
const db: FirebaseDatabase = app.database()
const ref: Reference = app.database().ref('/some/path')
app.database().ref('/some/path').set(ServerValue.Timestamp)

[alexfung888]

@kksharma1618 but how do I get the auth object? Refer to my post above, at
https://github.com/firebase/firebase-js-sdk/issues/388#issuecomment-353715417

[buu700]

firebase.auth and app.auth both work as expected in @kksharma1618's example as far as I can tell.

Also, you can import firebase this way instead (which seems more idiomatic to me, but without documentation we can only guess at the authors' intent): import {firebase} from '@firebase/app';.

[kksharma1618]

@alexfung888
I switched back to 4.8.0. Got stuck in this issue https://github.com/firebase/firebase-js-sdk/issues/387 while using @firebase/database (@firebase/app-types/private was missing)

Developers will most likely fix 4.8.1 issues soon enough. Till then I intend to stick with 4.8.0.
Btw,

import { FirebaseAuth } from '@firebase/auth-types'

was clearing firebase.auth() for me in 4.8.0. I had to remove it to get firebase.auth() working again. Not sure if that helps in your case.

[0x6368656174]

How to get the following code to work:
import '@firebase/firestore'; import { DocumentReference } from '@firebase/firestore-types'; if (path instanceof DocumentReference) { //.... }
This code will not work, because the implementation of DocumentReference is not in the @firebase/firestore-types. In addition, this code is not compiled by Webpack, he does not find the @firebase/firestore-types module.

I've already killed a lot of time to figure out how to use individual packages with types.

[jshcrowthe]

@0x6368656174 It's important to remember that the @firebase/*-types packages are similar to the @types/* packages. You won't get an actual implementation from them only the interface.

[jahed]

I'm still getting the same issue on 4.10.1. Is app-types meant to be a peerDependency? If it's just for TypeScript projects, why force non-TS projects to see a warning every time instead of making it an optionalDependency?

[jshcrowthe]

Hey @jahed it sounds like you have a different concern than the one expressed in this issue. This issue has been resolved as of #401. Please feel free to open a new issue related to your specific issue!

[zevdg]

How to get the following code to work:

import '@firebase/firestore';
import { DocumentReference } from '@firebase/firestore-types';
if (path instanceof DocumentReference) {
   //....
}

I just ran into this problem as well. The most frustrating part is that the error I got was extremely unhelpful. Either This dependency was not found: @firebase/firestore-types or Module not found: Error: Can't resolve '@firebase/firestore-types' depending on how I compiled.

The code below solved the problem for me:

import firebase from '@firebase/app';
import '@firebase/firestore';
import { DocumentReference, Query } from '@firebase/firestore-types';

function Foo(ref: DocumentReference|Query)
if (ref instanceof firebase.firestore.DocumentReference) {
    // ...
  }
  // ...
}