angularfire: TypeError: __WEBPACK_IMPORTED_MODULE_1_firebase_app__.app is not a function

Version info

Angular: 1.7.0

Firebase: 5.0.2

AngularFire: 5.0.0-rc.8.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node: 9.10.0

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

Errors in the JavaScript console

TypeError: __WEBPACK_IMPORTED_MODULE_1_firebase_app__.app is not a function

Output from firebase.database().enableLogging(true);

Screenshots

Expected behavior

FireStore should be utilizable from a component.

Actual behavior

Error in console, also a few errors on ng build --prod:

WARNING in ./node_modules/angularfire2/firebase.app.module.js
23:15-27 "export 'app' (imported as 'firebase') was not found in 'firebase/app'
WARNING in ./node_modules/angularfire2/firebase.app.module.js
13:19-41 "export 'initializeApp' (imported as 'firebase') was not found in 'firebase/app'

Not sure if it’s part of the problem, but I’m running Angular inside of Electron. There are no errors in any of my TypeScript files, no development compile errors - only the error in the console and a few errors (as mentioned before) in ng build --prod


Also, sorry for the full error in the title… I’m not good with naming

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 4
  • Comments: 19 (6 by maintainers)

Most upvoted comments

Also I’d suggest dropping the firebase dep entriely and just using the @firebase/* modules. In RC.9 I made sure this is no longer a peer dep.

Going to close for now. If you have a solid repro after taking all these steps please open a new issue.

Feel free to continue discussing here.

Hey y’all, I had a similar, if not exact problem throughout my updating journey today. Notable error: WARNING in ./src/app/core/auth.service.ts 35:27-40 "export 'auth' (imported as 'firebase') was not found in 'firebase/app'

It took me a little bit, but I went all in to fix this experimenting with the link @herkulano provided.

  1. If you’re updating to the newest angularfire2, make sure to update your angular to 6.0 as well as rxjs5 to rxjs6.
  1. I followed the instructions at update.angular.io with some additional tweaks to rxjs to fix errors at compile time.
  1. Then I refactored my import statement to utilize the new @firebase style.
  • before: import * as firebase from 'firebase/app';
  • after: import firebase from '@firebase/app';

Now it works without error!