TypeError: Object(...) is not a function

Question

working on ionic3, angularfire2 v5

TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:73935:76)
    at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:61778:27)
    at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Subject.next (http://localhost:8100/build/vendor.js:23237:25)
    at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Notification.observe (http://localhost:8100/build/vendor.js:51866:50)
    at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:76246:40)

home.ts

import { Component } from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
import { Observable } from "rxjs/Observable";
import { Item } from "../../models/item/item.model";
import {ShoppingListServices} from "../../services/shopping-list/shopping-list.services";



@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  shoppingList$: Observable<Item[]>;
  constructor(public navCtrl: NavController,  private shopping: ShoppingListServices) {
    this.shoppingList$=this.shopping
      .getShoppingList()
      .snapshotChanges()
      .map(
        changes => {
          return changes.map(c => ({
            key: c.payload.key, ...c.payload.val()
          }));
        }
      );
  }

}

home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Shoping List
    </ion-title>
    <ion-buttons end>
      <button navPush="AddShoppingItemPage" ion-button>
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Items
    </ion-list-header>
    <ion-item *ngFor="let item of shoppingList$ | async">
      {{ item.name }}
    </ion-item>
  </ion-list>
</ion-content>

Hey, same problem here. I found out, that the error comes from using Firestore within your application. I know this isn't an answer to the problem, but maybe it helps for further investigation. — StS, May 15 '18 at 12:27
yes i am investing. if i found any solution i will post here. you do same — Biswajit, May 15 '18 at 12:50
Possible duplicate of ["ERROR TypeError: Object(...) is not a function" using AngularFirestore and firebase](https://stackoverflow.com/questions/50374194/error-typeerror-object-is-not-a-function-using-angularfirestore-and-fire) — James Daniels, May 18 '18 at 21:52

score 22 · Accepted Answer · edited Jun 27 '18 at 18:00

22

This works for me, using "angularfire2": "^5.0.0-rc.11"

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

To retrieve the data:

this.db.list('/customers').valueChanges().subscribe((datas) => { 
  console.log("datas", datas)
},(err)=>{
   console.log("probleme : ", err)
});

Or you can check the GitHub repository for angularfire2 here for more details

edited Jun 27 '18 at 18:00

Paul Roub

36,322
27
84
93

answered Jun 27 '18 at 17:42

DevFest Douala Wilfried11

256
1
5

sir i have got same error and i am not using angularFire ,so it is possible to installed this plugin? – Kapil Soni Oct 25 '18 at 11:21
Ah! Worked for me I was only missing "promise-polyfill" thank you so much! – Jonathan Dec 26 '18 at 17:26

score 4 · Answer 2 · answered May 17 '18 at 23:10

4

Recent releases of AngularFire require rxjs 6. Please upgrade rxjs, you'll need to include rxjs-compat if you have dependencies that haven't yet upgraded.

answered May 17 '18 at 23:10

James Daniels

6,883
4
24
28

Angularfire2 version 5.0.0rc 4 solved my problem. But when rc8 or 9 and rxj(changed rxjs_compat). Something else error is coming, error with map https://stackoverflow.com/questions/50387987/updateing-snapshotchanges-code-to-use-angularfire2-5-0-0-rc-8-firebase-5-0/50401628#50401628 – Biswajit May 18 '18 at 04:42

score 3 · Answer 3 · answered May 30 '18 at 16:09

Even though you can run rxjs-compat, its only a matter of time before you need to change your code to reflect the new RXJS. If you are using Angular 6 and the Angular 6 CLI, then you will have RXJS 6, since Angular depends on RXJS for most things. Also if you plan on using Angular Material 2, then you will need Angular 6. So lets just update your RXJS. This will be really important as of Ionic 4. Ionic 4 will depend highly on angular as it will now include the Angular Routes.

Some of the most common changes of RXJS 6 is:

import 'rxjs/add/observable/of';
// or 
import { of } from 'rxjs/observable/of';

Becomes

import { of } from 'rxjs';

and

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

becomes

import { map, take } from 'rxjs/operators';

and

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

becomes

import { Observable, Subject } from 'rxjs';

https://www.academind.com/learn/javascript/rxjs-6-what-changed/

It's worth editing to mention the new pipe() usage for operators. The link you provided does explain that but I think your answer warrants mentioning it too. — ScottN, Jun 20 '19 at 14:38

score 2 · Answer 4 · edited May 14 '19 at 05:18

2

You need to install this: Run below command line in CLI

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

Then import these libs to your home.ts:

import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

edited May 14 '19 at 05:18

Flutterian

1,761
1
21
47

answered Oct 10 '18 at 07:18

purav topiwala

69
1
10

This suggestion also works for me. In addition to that, I have also downgraded angularfire2 from 5.1.3 to 5.0.0-rc.11 – Harry May 21 '19 at 21:18

score 0 · Answer 5 · answered Feb 27 '19 at 04:51

Though my issue isn't related to angularfire but searching for TypeError: Object(…) is not a function brings users to this question. My issue was that I was using Youtube Video Player plugin in ionic v3. But as ionic v3 docs are now auto redirected to ionic v4 docs I was using the latest version of the plugin.

just install version 4 of Youtube Video Player plugin and you are good to go.

npm install --save @ionic-native/youtube-video-player@4

Ionic v3 docs

P.S: when you are auto redirected to v4 docs of ionic just insert v3 in the URL.

score 0 · Answer 6 · answered Mar 09 '19 at 09:59

if you are getting after installing any new plugin in ionic 3

then just check the version of statusbar or splashscreen plugin in package.json file

  "@ionic-native/splash-screen": "~4.17.0",
  "@ionic-native/status-bar": "~4.17.0",

and change the version of your installed plugin to same and do

npm update

it will look like this

    "@ionic-native/camera": "^4.17.0",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",

Hope it helps someone ...... worked for me for android permission and camera plugin

also, you will need to remove ngx from import statement

import { Camera, CameraOptions } from '@ionic-native/camera';

score 0 · Answer 7 · answered Mar 11 '19 at 09:01

0

Its happend to me, Maybe you are using in your project ionic 3 , and you installing plugins of ionic version 4, if you are using ionic 3 ,try to install your plugins from https://ionicframework.com/docs/v3/.

answered Mar 11 '19 at 09:01

Aehm Abourafeh

16
1

score 0 · Answer 8 · answered May 11 '19 at 05:02

I'm using the rxjs-etc library and I was getting conflicts for some reason that not only caused the error TypeError: Object(…) is not a function but also absolutely killed my CPU in Chrome.

I'm not exactly sure why - it's related to a recent rxjs version being incompatible as far as I can tell - but if you're using this library it can be a cause of this.

Irina Udovyk · Answer 9 · 2018-05-16T13:41:31.867

-1

I changed from :

"angularfire2" : "5.0.0-rc.8.0" and   "firebase": "^5.0.2",

to :

"angularfire2" : "5.0.0-rc.6.0" and "firebase": "4.12.1"

edited May 16 '18 at 13:41

answered May 16 '18 at 10:37

Irina Udovyk

1
1

lets see, i will degrade the version – Biswajit May 16 '18 at 10:42
Same issue with 6.0. – Vivek Sinha May 16 '18 at 12:02

score -1 · Answer 10 · edited May 14 '19 at 06:08

-1

What worked for me:Run below command line in CLI

npm install angularfire2@5.0.0-rc.6 firebase@4.13.1

and

npm install @firebase/app@^0.1.6

edited May 14 '19 at 06:08

Flutterian

1,761
1
21
47

answered May 16 '18 at 21:45

Shivraj

46
4

score -4 · Answer 11 · answered Jul 12 '18 at 18:08

-4

I Have a solution :

Simply you can uninstall two package i.e angularfire2 and firebase

typeError: Object(...) is not a function ionic

answered Jul 12 '18 at 18:08

divyajeet singh

33
1

TypeError: Object(...) is not a function

11 Answers11

Linked

Related