Getting error "Cannot read property 'call' of undefined"


#1

Hello , I am developing an PWA in ionic 2 . Earlier it was working fine … suddenly I started getting error when I try to change anything in the application .

Please find the attached screenshot for reference

Please help if anybody has some idea regarding this


#2

hey @surjan, would you mind to past here you code to help figure out what’s wrong.


#3

The code is below , I have just added a condition for setting the root page `

export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      let params = new URL(window.location.href);
	  let id =  params.searchParams.get('id') || ''; 
	  if(id) {
	     this.rootPage = OffersPage;
	  }
	  
    });
  }
}

#4

please show the line in your code that cause this error. You are calling “call” from something that is undefined, we need to find that right place in your code. I don’t think the error happen in the code you paste here.


#5

Below is the only change which i did in my app :

 let params = new URL(window.location.href);
	  let id =  params.searchParams.get('id') || ''; 
	  if(id) {
	     this.rootPage = OffersPage;
	  }

#6

i understand that, but the error not come from there.
console.log the “id” and if the root is change to “OffersPage” so the problem is in “OffersPage”;
maybe i am wrong maybe not, cost nothing to check it.

Thanks


#7

This is OfferPage code and below is HomePage code

export class OffersPage {
  public offersdata: any;
  public result:any;
  constructor(public http: Http , public navCtrl: NavController){
  
     let params = new URL(window.location.href);
	 let id =  params.searchParams.get('id') || '';
	 this.result = "Y"
	 //let token = this.randomise();
	 //console.log(token);
	 

	   
     this.http.get('https://<example.com>/api/offers/load?id='+id).map(res => res.json()).subscribe(data => {
	    
	    if(data.result == 'success'){
          this.offersdata = data.offers;
		 
		}else{
		   this.navCtrl.push(HomePage);
		}
    });
  }
  
  randomise() {
        return Math.floor(Math.random() * (100000 - 1000)) + 1000;
  }
  

  itemSelected(item2: Object) {
       this.navCtrl.push(DetailsPage);
  }
  
}

Below is Home page

export class HomePage {
  public pageTitle:any;
  public offersdata: any;
  constructor(public navCtrl: NavController,public http: Http) {
      this.pageTitle = "Health & Glow";
	  
	  this.http.get('https://<example.com>/api/offers/all').map(res => res.json()).subscribe(data => {
	    
	    if(data.success){
          this.offersdata = data.data;
		 
		}else{
		   //this.navCtrl.push(HomePage);
		}
    });
	  
	  
  }
  
  newList(){
    this.navCtrl.push(OffersPage);
  }
  
  itemSelected(item: Object) {
    //console.log("dshkdahsk "+item);
	 this.navCtrl.push(DetailsPage,item);
  }

}


#8

you need to use separation of concern, create provider that will hold your http call.
retrieve data in your page in ionViewDidLoad, the constructor should not be use for complicate stuff, just for simples initializations.
use console.log in home and offer to track down in which page the error occur, and track down the error till find out where exactly your code break.
You can share a git repo with the project, so i could download and run it and try to figure out where it broke.(suggestion)

Thank


#9

Thanks for your help and suggestion … I have moved all the complex code inside ionViewDidLoad and it worked without any issue after doing the changes also …


#10

I’ve been seeing something like this too: randomly getting “Cannot read property ‘call’ of undefined”.

Any code change didn’t seem like it would trigger this. And, more tellingly, simply restarting ionic serve fixed the problem. That makes me thing it’s not in the application code, but somewhere deeper.


#11

Hi, I have the same issue in Ionic 3 PWA.
The error happened when i do some action(click or navigate) after app was served
It happened once in a while, not everytime.
I have also deployed the app in firebase host.
This error will sometime show when i open the app.
I suspect this is problem of the service worker.
I have try @manoemerson, but its not work, the error remain, below is my service worker

self.toolbox.precache(
[
’./build/vendor.js’,
’./build/main.js’,
’./build/main.css’,
’./build/polyfills.js’,
‘db1.json’,
‘index.html’,
‘manifest.json’

]
);

This probably happen because something is not finish loaded, when i click a button, then error of Cannot read property ‘call’ of undefined

Anyone have solution for this?

Its not just happened in localhost, firebasehost also.
Randomly show up.


#12

I’ve found the same. A simple restart works every time. I’ll keep an eye out for it to see if there’s a pattern, but I would definitely recommend just restarting to see if that does the trick.


#13

Yes restart will help. but if ur app deployed to online hosting like firebase, this error will remain and error happen ramdomly.


#14

I’m getting the same errors as above. A seemingly random error appears when navigation through my PWA app.

  • vendor.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘call’ of undefined
    TypeError: Cannot read property ‘call’ of undefined
    at e (vendor.js:1)
    OR
  • TypeError: Cannot read property ‘call’ of undefined
    at e (vendor.js:1)

Restarting does sometime solve the issue.

Any suggestions?

Regards,
Orion


#15

So nobody has any idea about why I’m getting these random errors. It only happens when a user does an action, for example: click on a checkbox, click on a tab link, click on a item list.

It really seems like the build is corrupted as reloading sometimes fixes it and I can use the app with no issue.

I’m really going crazy trying to debug this…

Cheers,
Orion


#16

I have exactly the same issue @chenlitchian. Did you solve this?


#17

Bump. Any idea why this is happening ?

This error on github seems very similar to my issue.


#18

@pnock
@chenlitchian
@kjmp32
@oriongunning

I believe this issue is related to the browser using cached versions your lazy loaded pages. You can avoid this issue during development by disabling your browser’s cache:

46

See: https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/


#19

this doesn’t help, caching is always disabled


#20

Hey everyone

I am having the same Issue for days now. Occurs with ionic serve as well as in production running ionic build --prod or nom run ionic:build --prod.
After rebuilding the errors occur in different patterns, but always very randomly upon clicking a button that switches a page.

I assume it has something to do with Lazy Loading, but I have no idea how to get a hold of it… :frowning: