JS ERROR Error: Page is already shown on another frame



Hi guys, so I was trying to use nativescript-google-maps-sdk and when I run my app, I always get this error:

file:///app/tns_modules/tns-core-modules/ui/page/page.js:73:75: JS ERROR Error: Page is already shown on another frame.

I’ve taken a look at page.ios.ts and tried to find any related posts, but I couldn’t find any and couldn’t figure out what the error means by

from lines 87~107

// Don't raise event if currentPage was showing modal page.
        if (!owner._presentedViewController && newEntry && (!frame || frame.currentPage !== owner)) {
            const isBack = isBackNavigationTo(owner, newEntry);
            owner.onNavigatingTo(newEntry.entry.context, isBack, newEntry.entry.bindingContext);

        if (frame) {
            if (!owner.parent) {
                owner._frame = frame;
                if (!frame._styleScope) {
                    // Make sure page will have styleScope even if frame don't.

            } else if (owner.parent !== frame) {
                throw new Error("Page is already shown on another frame.");


Could anybody elaborate what that means and how I can solve this problem?

PS: the xml sample page from nativescript-google-maps-sdk is

<!-- /app/main-page.xml -->
    <maps:mapView latitude="{{ latitude }}" longitude="{{ longitude }}" mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
    								zoom="{{ zoom }}" bearing="{{ bearing }}" 
    								tilt="{{ tilt }}" padding="{{ padding }}" mapReady="onMapReady"  
   								markerSelect="onMarkerSelect" markerBeginDragging="onMarkerBeginDragging"
   								markerEndDragging="onMarkerEndDragging" markerDrag="onMarkerDrag"
   								cameraChanged="onCameraChanged" />

and that’s exactly what I was testing in my app.



I am running into the same issue; it would be great to get some more information on what this is and what causes it!


I know, I’m a bit late, but try to remove Page tags, if you are running Angular. This solved all these issues for me.


what do I do if I’m using Nativescript with Vue?


I’m facing this issue of Page is already shown on another frame in Nativescript-Vue, when I write something like this, it only works on Android, but gives the issue when running on iOS

    <TabView @onLoaded="onPageLoaded" tabTextColor="white" :selectedIndex="selectedIndex" tabBackgroundColor="black" @tabChange="tabChange" selectedTabTextColor="#F08345" iosIconRenderingMode="alwaysOriginal" androidSelectedTabHighlightColor="#F08345" ref="tabs">
      <TabViewItem title="Home" :iconSource="`${ home }`">
        <app-welcome @updateIndex="indexUpdated"></app-welcome>
      <TabViewItem title="Available" :iconSource="`${ avail }`">
      <TabViewItem title="Inbox" :iconSource="`${ inbox }`">
      <TabViewItem title="Completed" :iconSource="`${ completed }`">
      <TabViewItem title="Profile" :iconSource="`${ profile }`">

but when I remove the <app-xxx></app-xxx> part it works fine. @manojdcoder


I don’t think we have multi frame support yet for Vue. You can use TabView as root for your application, you have to use a Page and add TabView within, app-*** should not have Page as parent.


okay @manojdcoder you mean I should have something like this



Try something like this,

<TabView :selectedIndex="selectedIndex">
  <TabViewItem title="Tab 1">
  <TabViewItem title="Tab 2">

Note: app-* component should not Page in it. It should just your layouts or whatever UI components you want to place.


thanks @manojdcoder …got it working by removing the page tag in the other screens.