Popover Dismiss Causes "RangeError: Maximum call stack size exceeded"

Ionic Framework ionic-v3
1

I am using ionic2 beta8.

I have copied exact usage example from http://ionicframework.com/docs/v2/2.0.0-beta.8/api/components/popover/Popover/#usage

The only thing I changed is I have created separate files for popover.ts popover.html.

After all those changes everything worked fine in browser. But when I test that in Android device, when I try to dismiss the popover (either by calling this.viewController.dismiss() method or clicking on backdrop) I see that UI hung up and nothing happens.

I checked logs in Android Monitoring tool then I found following exception in log.

[INFO:CONSOLE(34947)] "EXCEPTION: Error in ./PopoverCmp class PopoverCmp - inline template:0:14", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "ORIGINAL STACKTRACE:", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "RangeError: Maximum call stack size exceeded
    at Object.re.RequireObjectCoercible (file:///android_asset/www/build/js/es6-shim.min.js)
    at Object.re.ToObject (file:///android_asset/www/build/js/es6-shim.min.js:10:4947)
    at Function.keys (file:///android_asset/www/build/js/es6-shim.min.js:10:24378)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69658:27)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "ERROR CONTEXT:", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(34947)] "[object Object]", source: file:///android_asset/www/build/js/app.bundle.js (34947)
[INFO:CONSOLE(260)] "Uncaught EXCEPTION: Error in ./PopoverCmp class PopoverCmp - inline template:0:14
ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded
ORIGINAL STACKTRACE:
RangeError: Maximum call stack size exceeded
    at Object.re.RequireObjectCoercible (file:///android_asset/www/build/js/es6-shim.min.js)
    at Object.re.ToObject (file:///android_asset/www/build/js/es6-shim.min.js:10:4947)
    at Function.keys (file:///android_asset/www/build/js/es6-shim.min.js:10:24378)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69658:27)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
    at _baseExtend (file:///android_asset/www/build/js/app.bundle.js:69665:17)
ERROR CONTEXT:
[object Object]", source: file:///android_asset/www/build/js/zone.js (260)
Debugger is no longer active
2

On which Android version are you testing? And check if there’s no warning or error in the browser console as well. You could also check out this SO question for some ideas what might cause the problem (e.g. accidentally importing/embedding the same JS file twice, etc).

3

Hi @iignatov,

My android version is 5.1.1. I am using Nexus 7 for testing the deployment.

I am pretty sure that there is no such loop which might cause it. Because I am using plain script as shown in usage section.

I tried to use the ionic-preview-app https://github.com/driftyco/ionic-preview-app/ but that is also not running on device for different error.

All other part of the app I am developing is working very fine and smoothly. Just it doesn’t close when clicked on backdrop and it shows the exception.

4

Could you provide the source code of the popover TS and HTML files and from the file that uses it the methods that work with it?

5

I’m also experiencing this exact same behaviour testing on a device running android version 4.4.

6

@iignatov

Here is the code I am using. Its very minimal code.

import { Component } from '@angular/core';
import { App, NavController, NavParams, MenuController, Popover, ViewController } from "ionic-angular";
import { Storage, LocalStorage } from 'ionic-angular';

import { AuthService } from "./../../../services/user/auth";
import { AuthModel } from "./../../../models/user/auth";


@Component({
	template: `
		<ion-list>
			<ion-list-header>Welcome</ion-list-header>
			<button ion-item (click)="onLogout($event)">Logout</button>
		</ion-list>
	`,
	providers: []
})
class PopoverPage {
	private storage;

	constructor(private viewController: ViewController, private nav: NavController, private authService: AuthService, private auth: AuthModel) {
		this.storage = new Storage(LocalStorage);
	}

	close() {
		console.log('On Close Popover');
		this.viewController.dismiss();
	}

	onLogout() {
		this.close();
	}
}

@Component({
	templateUrl: "build/pages/app/dashboard/dashboard.html",
	providers: []
})
export class DashboardNewPage {
	private storage;

	constructor(protected app: App, protected nav: NavController, protected navParams: NavParams, private menu: MenuController, private authService: AuthService, private auth: AuthModel) {
		this.storage = new Storage(LocalStorage);
	}

	public onPopover(event) {
		let popover = Popover.create(PopoverPage);
		this.nav.present(popover, {
			ev: event
		});
	}
}

onPopover function is getting called when nav button is triggered and that markup is present in dashboard.html

This page is rootPage of app and it gets loaded immediately.

Last thing I see in logcat is ‘console.log(‘On Close Popover’);’ execution. After that it shows exception.

Let me know if I did something wrong here. Please note that this works perfectly fine in browser. But fails in android device.

Thank you.

7

The code looks OK, unless I overlooked something.

I guess that the possible cause might be that:

  1. The object that is passed to ToObject() method is too big - this will work on a desktop browser because it has bigger stack so it could handle it but obviously fails on mobile.

  2. It might be an issue with the es6-shim ToObject() method (either a bug or it’s not very effective or not optimized) - most desktop browsers should have a native implementation of this method and therefore it works fine but obviously on mobile there’s no native implementation yet.

Could you open an issue about this so that someone from the Ionic team also takes a look at it?

8

The same issue running android version 5.0, but works ok on android version 6.0.1

9

I think the problem is the web-view version. When I build my project with Crosswalk everything works fine.

install:

Terminal/command line: cordova plugin add cordova-plugin-crosswalk-webview

then erase the old apk file from Your_project/platforms/android/build/outputs/apk

ionic run android / ionic build android

Update:

First time I stumbled on this exception, it was happening only on physical devices.
Crosswalk solved it.

Then it happened again but on the browser this time.
I realised it only happen when I try to call the popover from a DIV. A button or ion-item
do not triggers the exception.

I manage to work around it by passing “null” as an event before presenting the popover:

 popover.present({ ev: null }); //ionic 2  .11 sintax

I hope it helps.

10

This error is still in browser. ( using ionic2 beta.11 )
I happen when I try to call the popover from a button.

this don’t work.

<ion-buttons end >
  <button royal primary (tap)="presentPopover($event)"><span><ion-icon name="more" royal ></ion-icon></span></button>
</ion-buttons>

this work.

<ion-buttons end (tap)="presentPopover($event)">
  <button royal primary><span><ion-icon name="more" royal ></ion-icon></span></button>
</ion-buttons>

thanks.