Cannot read property 'FacebookAuthProvider' of undefined - 2.0.0-beta.5

[mquentin]

Hello,

Since I have updated my angularfire2 to the 2.0.0-beta.5 version, I have got an error about the FacebookAuthProvider.
I do not use this provider and it seems that the problem come form my loaded angularfire2.umd.js file.

Do you guys encounter the same issue ?

[mukesh51]

@mquentin I don't get this error, infact I am able to get FacebookAuthProvider.

Snippet from my code:

constructor(public af: AngularFire, public auth: FirebaseAuth) {
this.authState = auth.getAuth();
auth.subscribe((state: FirebaseAuthState) => {
this.authState = state;
console.log("Display Name "+this.authState.facebook.displayName);
console.log("photo URL "+this.authState.facebook.photoURL);
});

}

---

Snippet of my package.json

"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"angularfire2": "^2.0.0-beta.5",
"core-js": "^2.4.1",
"firebase": "^3.4.0",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},

[mquentin]

Hello @mukesh51, my package.json sets up theses dependencies (I will repeat myself, but this issues didn't occur when I was using 2.0.0-beta.4) :

"dependencies": {
"angularfire2": "^2.0.0-beta.5",
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "^2.2.0",
"express": "^4.13.4",
"express-jwt": "^3.3.0",
"firebase": "^3.4.0",
"forever": "^0.15.2",
"jsonwebtoken": "^5.7.0",
"serve-favicon": "~2.3.0",
"typescript": "^2.0.2",
"typings": "^1.3.2"
},
"devDependencies": {
"@angular/common": "^2.0.0",
"@angular/compiler": "^2.0.0",
"@angular/core": "^2.0.0",
"@angular/forms": "^2.0.0",
"@angular/http": "^2.0.0",
"@angular/platform-browser": "^2.0.0",
"@angular/platform-browser-dynamic": "^2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"concurrently": "^2.2.0",
"core-js": "^2.4.1",
"nodemon": "^1.9.1",
"reflect-metadata": "^0.1.4",
"rxjs": "^5.0.0-beta.12",
"systemjs": "^0.19.27",
"systemjs-builder": "^0.15.26",
"yargs": "^4.8.1",
"traceur": "0.0.96",
"zone.js": "^0.6.23"
}

So far, I do not get what could be wrong...

[mukesh51]

Do you want to share your code or may be plnkr.

[mquentin]

Hello mukesh51, I tried to create a plunker but it was definitely hard to set up the same conf. Fortunately, I fixed the issue by forcing the version of firebase to 3.4.0.

From
"firebase": "^3.4.0",
To
"firebase": "3.4.0"

[Znow]

Hi

I'm still getting this, even when trying with @mquentin 's solution.

Regards

[davideast]

@Znow Can you provide a repro? A github repo or a plnkr would be excellent.

[Znow]

@davideast - https://github.com/Znow/ZnowBlog - based on angular2-webpack, and then added stuff for angularfire2.

Thanks

[maxmumford]

I'm also getting this on the plunker from the angularfire2 readme:

http://plnkr.co/edit/7uJzav4tj2MuwT7b7fiX?p=preview

[Auxilinaut]

Yep, that's the official AngularFire2 plunker template. There seems to be an incompatibility between Firebase 3.4.1 and AngularFire2 2.0.0-beta.5. Changing the Firebase version to a strict 3.4.0 ("https://npmcdn.com/[email protected]/" in systemjs.config.js on that plunker) is a workaround until they fix it.

[Znow]

@Auxilinaut - Angular2-webpack isn't using systemjs, as I see.

Regards

[mcchae7]

I am using "angularfire2": "^2.0.0-beta.6".
I found the cause of this issue. angularfire2.umd.js line 340 "var _a = firebase.auth;" causes this issue. firebase.firebase is firebase due to some unknown reason. I updated "firebase = firebase.firebase;", then it is working. I think some configurations are not correct. I am trying to figure out that.

[Judahh]

I have the same problem. And if I do what @mcchae7 suggests I receive this error:

zone.js:1382 GET http://localhost:8000/traceur 404 (Not Found).

repro:
https://github.com/Judahh/judahh

[AnthonySoler]

Hello,

I encountered the same error (Cannot read property 'FacebookAuthProvider' of undefined) using the 2.0.0-beta.6.

As mentioned by @mcchae7, in angularFire2.umd.js, at line 5, the retreived firebase object does not seems to be the good one (or Am I doing something wrong?)

The one actually retreived owns the following properties:

• __awaiter
• __decorate
• __extends
• __metadata
• __param
• firebase

If, at the beginning of this function, I added the following instruction and it worked.
firebase = firebase.firebase;

I first thought that changes related to the issue #525 could be somehow related but as they are tagged as 2.0.0-beta.6 and that @mquentin encountered the problem in 2.0.0-beta.5, I am not so sure anymore.

My package.json file looks like this:

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/material": "^2.0.0-alpha.10",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "angularfire2": "^2.0.0-beta.6",
    "core-js": "^2.4.1",
    "firebase": "^3.6.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "@types/jasmine": "^2.5.36",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

My systemjs.config.js file looks like this:

(function (global) {
  System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      app: 'app',
      // angular bundles
      ...
      'firebase':'npm:firebase/firebase.js',
      'angularfire2': 'npm:angularfire2',
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      angularfire2: {
        main: 'bundles/angularFire2.umd.js',
        defaultExtension: 'js'
      }
      ...
    }
  });
})(this);

and My app.module.ts looks like this

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';

import { AngularFireModule } from 'angularfire2';

import { AppComponent } from './app.component';
import { EventsComponent } from './events.component';

// Must export the config
export const firebaseConfig = {
    apiKey: "<my-api-key>",
    authDomain: "<my-project-name>.firebaseapp.com",
    databaseURL: "https://<my-project-name>.firebaseio.com",
    storageBucket: "<my-project-name>.appspot.com",
};

@NgModule({
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(firebaseConfig),
        ...
    ],
    declarations: [
        AppComponent,
        ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Concerning @Judahh issue, have a look here

I hope this will help,

Have a good day,

[evellynsc]

I got the same issue. Solved by adding firebase = firebase.firebase; right before var _a = firebase.auth; in angularfire2.udm.js file as @mcchae7 suggested.
My configuration files are similar to @AnthonySoler's.

Thanks for the help!

[Rambatino]

This is still an issue, and the above solutions haven't worked for me

[Rambatino]

I solved my issue, because for some reason I can't import * as 'firebase' from 'firebase I can only import firebase from 'firebase'. Not particularly sure why, but it's an ionic 2 app...so I just changed firebase_sdk_auth_backend.js and it worked. Not really a solution though...

[mukesh51]

I see a typo in the syntax. It should be

import * as firebase from 'firebase'

What error you get when you import firebase. Ionic 2 App works fine. Have a look at issue #691

[samedii]

I am using ionic2 and I had this issue too. I had to add a custom rollup.config.js script (not sure every option here is actually needed):

plugins: [
  ...
  commonjs({
      include: [
        'node_modules/rxjs/**',
        'node_modules/angularfire2/**',
        'node_modules/moment/**',
        'node_modules/@ionic/storage/**'
      ],
      namedExports: {
        'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database'],
        'node_modules/angularfire2/node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database']
      }
  }),
...

from here https://forum.ionicframework.com/t/ionic-2-rc-0-and-firebase-not-angularfire/65018/7

Also have useStrict: false or else I get navigator undefined...

Note that you set where your custom config is in package.json with:

...
  "config": {
    "ionic_rollup": "./scripts/rollup.config.js"
  }
}

Hope this helps someone save some time and maybe make it easier to find a proper solution

[Rambatino]

I went down the config route but I really don't think that's the best way to go. In the end, whatbworked for me was updating all the angular versions to 2.2.1. Then it worked

[isaquesuzuki]

@Rambatino how did you update all angular versions?

[samedii]

@isaquesuzuki Change version of angular packages in package.json and run npm update

[isaquesuzuki]

Thanks @samedii. Is there any problem if npm warns me about [email protected] requiring a peer of @angular/[email protected]?

[samedii]

@isaquesuzuki Try and see if it works. I think I maybe got it to work by using version 2.1.1 and not 2.2.1

[arielcessario]

I have two projects, ones is working, the other one, it isn't, the one that is working is showing more files loaded when I pause the execution just before var _a = firebase.auth;, the one that it's not working it's only showing firebase.js. The one that it's working shows app.js, auth.js, database.js, storage.js and firebase.js.

The version that is working is 3.4, the one that it's not working is 3.6.3.

For me, to make v3.6.3 to work (for now, not a solution, just a workaround), was to include this lines:
var firebase = require('./app');
require('./auth');
require('./database');
require('./storage');
module.exports = firebase;

in firebase.js

[rchipman]

@arielcessario this works for me too as a workaround. Any word on the official solution to this issue?

After digging a bit deeper I was able to figure out a decent solution. I just changed my system.js.config firebase definition to point to firebase-browser.js instead of firebase.js.

'firebase': {
    defaultExtension: 'js',
    main: './firebase-browser.js'
}

[mcchae7]

I added and updated wiki pages for that for Angular2 seed.

this.addPackageBundles({
      name: 'firebase',
      path: 'node_modules/firebase/',
      packageMeta: {
        main: 'firebase-browser.js',
        defaultExtension: 'js'
      }
    });

https://github.com/mgechev/angular-seed/wiki/Integration-with-Firebase
https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularFire2

[stuartdrennan]

@xmcchae7 I updated the project.config.ts as above, but still get 'Uncaught TypeError: Cannot read property 'FacebookAuthProvider' of undefined' after a prod.build. Would you have any other ideas on this fix for this?

[mcchae7]

@stuartdrennan I used Firebase only, you can see my example here ->
Full Source: https://github.com/GoEngin/GoEnginO
firebase.initializeApp: https://github.com/GoEngin/GoEnginO/blob/master/src/client/app/app.component.ts
using firebase: https://github.com/GoEngin/GoEnginO/blob/master/src/client/app/shared/util/dataaccess.ts

[stuartdrennan]

@mcchae7 thanks, sorry. That doesn't help with my project for some reason though. I'm using angularfire2.

"angularfire2": "^2.0.0-beta.6"
"firebase": "^3.6.4"

Its fine in development, but only errors on prod.build version.
I've tried all the suggestions I can see here; changing project.config.ts, changing angularfire2.umd.js fixes it in development but not in production.

Any thoughts would be much appreciated? :)

[stuartdrennan]

For a test, I cloned the latest angular2-seed and installed only angularfire2 with the same result. Fine in development, errors on production build. The https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularFire2 intructions say to use [email protected] & [email protected] but [email protected] doesn't contains 'firebase-browser.js' so the build is not happy with that version.

[renearias]

firebase = firebase.firebase; dont work when

packageMeta: {
        main: 'firebase-browser.js',
        defaultExtension: 'js'
      }

to solve this then use

packageMeta: {
        main: 'firebase.js',
        defaultExtension: 'js'
      }

and now you can use
firebase = firebase.firebase;
on angularfire2.umd.js file

[arielfaur]

This is still an issue with 2.0.0-beta.7.1-pre I still get Uncaught TypeError: Cannot read property 'FacebookAuthProvider' of undefined even though I am not using any auth providers. I have tried every approach mentioned here with no success, also tried downgrading to firebase 3.4.0
Any ideas?

[amedinavalencia]

Making the change in the packagemeta object fix the issue with the build process, but it seems other things get broken. In my case, I am using storage API and now the app is throwing an error related with it: firebase.storage is not a function.

Any suggestion?

thanks!!

Edit: I solved this. I adapted the imports to the new object structure, I had to disable the tslinter as well. I will keep doing some test around that, if I find something new, I will put here.

Thanks

[metallimiach]

I've faced with the same issue. Resolved with changes angularfire2.udm.js file as @AnthonySoler and @evellynsc saggested. But I not sure that's best aproach, because it might be a reason of another issues in future.

[kilka]

Has there been any update on this? I've tried adding the firebase = firebase.firebase; bit to angularfire2.umd.js file and am still getting errors.

[digitaldynamics]

Thanks @arielcessario , I have fixed it..