TypeError: __WEBPACK_IMPORTED_MODULE_1_firebase_app__.app is not a function

[xlxAciDxlx]

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

[herkulano]

I have a similar problem with ng serve

At build time:

WARNING in ./src/app/auth/services/auth.service.ts
25:47-54 "export 'auth' (imported as 'fb') was not found in 'firebase/app'

At runtime:

ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Code:

new fb.auth.GoogleAuthProvider()

[herkulano]

The issue was in firebase import
This solves it: firebase/firebase-js-sdk#820

[xlxAciDxlx]

So I'm assuming I should modify the AngularFire line that's erroring then? None of the errors pertain to my code.

Imports: (app.module.ts)

...
import { AngularFireModule, FirebaseAppConfig } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFirestoreModule } from 'angularfire2/firestore';
...

Firebase Initialization: (app.module.ts)

...
		AngularFireModule.initializeApp(FirebaseConfig),
		AngularFireAuthModule,
		AngularFireStorageModule,
		AngularFirestoreModule
...

Imports: (services.service.ts)

...
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
...

Usage: (services.service.ts)

...
	servicesCollection: AngularFirestoreCollection<Service>;
	services: Observable<Service[]>;
	itemDoc: AngularFirestoreDocument<Service>;

	constructor(private afs: AngularFirestore) {
		this.servicesCollection = this.afs.collection('services', ref => ref.orderBy('title', 'asc'));

		this.services = this.servicesCollection.snapshotChanges().map(changes => {
			return changes.map(a => {
				const data = a.payload.doc.data() as Service;
				data.id = a.payload.doc.id;
				return data;
			});
		});
	}
...

---

Unless some of that is incorrect, I can't see what I can change to fix the error.

[jamesdaniels]

@xlxAciDxlx maybe this is getting you, I have it in a PR right now f9a0964

[ruandeveloper]

I'm also having the same problem. Any solution?

[xlxAciDxlx]

I'm also having the same problem. Any solution?

Phew, glad I'm not the only one. I followed numerous tutorials and they all led to the same result, this error. I manually tried @jamesdaniels proposed PR, but to no avail.

So at least from my side, I've not been able to find a solution, unfortunately. :/

[jamesdaniels]

Can you post the firebase parts of your package.json?

…

On Tue, May 15, 2018 at 5:09 PM AciD ***@***.***> wrote: I'm also having the same problem. Any solution? Phew, glad I'm not the only one. I followed numerous tutorials and they all led to the same result, this error. I manually tried @jamesdaniels <https://github.com/jamesdaniels> proposed PR, but to no avail. So at least from my side, I've not been able to find a solution, unfortunately. :/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1647 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACvr1nGOV6YtBM1uQCwoC2VDcJjbXWTks5ty25SgaJpZM4T-fyC> .

[xlxAciDxlx]

	"dependencies": {
		"angular": "^1.7.0",
		"angularfire2": "^5.0.0-rc.8.0",
		"firebase": "^5.0.2",
	},

[jamesdaniels]

You'll want to transition over to using the new module style @firebase/app, @firebase/firestore, etc. Give those a shot and see if that helps.

[xlxAciDxlx]

So would I just use those in package.json, or in my actual component/service as well? If so, could you type up a quick example for me? Or even point me to documentation would work as well.

[jamesdaniels]

yeah, use those in your package.json; it should resolve the issue that you're experiencing

[xlxAciDxlx]

The same result, unfortunately.

package.json:

	"dependencies": {
		"@firebase/app": "^0.3.1",
		"@firebase/app-types": "^0.3.1",
		"@firebase/auth": "^0.5.2",
		"@firebase/auth-types": "^0.3.2",
		"@firebase/firestore": "^0.5.2",
		"@firebase/firestore-types": "^0.4.1",
		"@firebase/storage": "^0.2.2",
		"@firebase/storage-types": "^0.2.2",
		"angular": "^1.7.0",
		"angularfire2": "^5.0.0-rc.8.0",
...
		"firebase": "^5.0.2",
...
	},

---

I'll try clearing my node_modules directory and running npm i again.

[xlxAciDxlx]

Tried clearing out my node_modules directory, running npm i again, and still got the same result.

[jamesdaniels]

I'm not sure then, sounds like something up with your webpack. Firebase 5.0 (and late 4.x for that matter) did change a lot about how the modules are put together. If you're comfortable please share more information about your project, node_modules, and webpack config over email jamesdaniels@google.com