JS ERROR Error: Page is already shown on another frame

nativescriptcore

#1

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.
                    owner._updateStyleScope();
                }

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

            frame._updateActionBar(owner);
        }

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 -->
 <Page 
	xmlns="http://www.nativescript.org/tns.xsd"
	xmlns:maps="nativescript-google-maps-sdk"
	>
  <GridLayout>
    <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" />
  </GridLayout>
</Page>

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

Thanks!


#2

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


#3

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.


#4

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


#5

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>
      <TabViewItem title="Available" :iconSource="`${ avail }`">
        <app-available></app-available>
      </TabViewItem>
      <TabViewItem title="Inbox" :iconSource="`${ inbox }`">
        <app-inbox></app-inbox>
      </TabViewItem>
      <TabViewItem title="Completed" :iconSource="`${ completed }`">
        <app-completed></app-completed>
      </TabViewItem>
      <TabViewItem title="Profile" :iconSource="`${ profile }`">
        <app-profile></app-profile>
      </TabViewItem>
    </TabView>

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


#6

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.


#7

okay @manojdcoder you mean I should have something like this

<template>
<page>
<Tabviewitem>
</Tabviewitem>
</page>
</template>

#8

Try something like this,

<page>
<TabView :selectedIndex="selectedIndex">
  <TabViewItem title="Tab 1">
    <app-inbox></app-inbox>
  </TabViewItem>
  <TabViewItem title="Tab 2">
    <app-completed></app-completed>
  </TabViewItem>
</TabView>
</page>

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


#9

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