Mapview crashes when using with NativeScript-Vue

When Trying to use nativescript with vue, the map simply crashes

Here is the code: <template> <MapView :latitude=“latitude” :ongitude=“longitude” mapAnimationsEnabled=“true” mapReady=“onMapReady()”, ref=“map” v-model=“map” /> </template>

<script> import Vue from 'nativescript-vue'; Vue.registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView); export default { name: "mapa", data(){ return { latitude: -25.3894267, longitude: -49.2722997 } }, methods: { onMapReady: function () { console.log("map created"); } } } </script>

and here is the package.json

{ “name”: “Sample Map”, “version”: “1.0.0”, “description”: “A native application built with NativeScript-Vue”, “author”: “Andre Mariano”, “license”: “MIT”, “scripts”: { “build”: “webpack --env.tnsAction build”, “build:android”: “npm run build – --env.android”, “build:ios”: “npm run build – --env.ios”, “debug”: “webpack --watch --env.tnsAction debug”, “debug:android”: “npm run debug – --env.android”, “debug:ios”: “npm run debug – --env.ios”, “watch”: “webpack --watch --env.tnsAction run”, “watch:android”: “npm run watch – --env.android”, “watch:ios”: “npm run watch – --env.ios”, “clean”: “rimraf dist” }, “dependencies”: { “nativescript-cardview”: “^2.0.5”, “nativescript-drawingpad”: “^2.1.1”, “nativescript-google-maps-sdk”: “^2.5.0”, “nativescript-sqlite”: “^2.0.1”, “nativescript-theme-core”: “^1.0.4”, “nativescript-ui-sidedrawer”: “^3.5.1”, “nativescript-vue”: “^1.3.0”, “tns-core-modules”: “~3.4.1”, “vue-router”: “^3.0.1”, “vuex”: “^3.0.1” }, “devDependencies”: { “babel-core”: “^6.26.0”, “babel-loader”: “^7.1.3”, “babel-plugin-transform-object-rest-spread”: “^6.26.0”, “babel-preset-env”: “^1.6.1”, “copy-webpack-plugin”: “^4.4.2”, “css-loader”: “^0.28.10”, “extract-text-webpack-plugin”: “^3.0.2”, “fs-extra”: “^5.0.0”, “nativescript-vue-externals”: “^0.1.1”, “nativescript-vue-loader”: “^0.1.5”, “nativescript-vue-target”: “^0.1.0”, “nativescript-vue-template-compiler”: “^1.3.0”, “node-sass”: “^4.7.2”, “ns-vue-loader”: “^0.1.2”, “optimize-css-assets-webpack-plugin”: “^3.2.0”, “rimraf”: “^2.6.2”, “sass-loader”: “^6.0.6”, “vue-template-compiler”: “^2.5.13”, “webpack”: “^3.11.0”, “webpack-synchronizable-shell-plugin”: “0.0.6”, “winston-color”: “^1.0.0” } }

Everytime I get a “A Frame must be used to navigate to a Page”. This error always shows up when a page can’t be rendered System.err: Caused by: com.tns.NativeScriptException: System.err: Calling js method onCreate failed System.err: System.err: Error: A Frame must be used to navigate to a Page.

When going deeper in the Nativescript-vue lib I got this error after trying to create the element:

undefined is not a constructor (evaluating 'new n') but I couldn’t go further

[hans00]

Here is my code

main.js

import Vue from 'nativescript-vue';

// ... some others

import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';
Vue.registerElement('MapView', ()=> require('nativescript-google-maps-sdk').MapView)

// Vue ... $start();

Map.vue

<template>
	<Page>
		<GridLayout>
			<MapView row="0" :latitude="latitude" :longitude="longitude"  :zoom="zoom" :bearing="bearing" :tilt="tilt" :padding="padding" :minZoom="minZoom" :maxZoom="maxZoom" @mapReady="mapReady" @markerSelect="onMarkerSelect" />
		</GridLayout>
	<Page>
</template>

<script>
import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';
import { Position, Marker } from "nativescript-google-maps-sdk";

export default {
	data () {
		return {
			latitude:  0,
			longitude: 0,
			zoom: 15,
			minZoom: 0,
			maxZoom: 22,
			bearing: 0,
			tilt: 0,
			padding: [40, 40, 40, 40],
			mapView: null,
		};
	},
	methods: {
		mapReady(args) {
			this.mapView = args.object
			this.mapView.infoWindowTemplate = `
				<StackLayout orientation="vertical" width="200">
					<Label text="{{title}}" className="title"/>
					<Label text="{{snippet}}" textWrep="true" class="snippet"/>
				</StackLayout>
			`
			const marker = new Marker()
			marker.position = Position.positionFromLatLng(0, 0)
			marker.title = 'Test'
			marker.snippet = 'test'
			marker.userData = {test: 'test'}
			this.mapView.addMarker(marker)
		},
		onMarkerSelect(args) {
			console.log(args.marker)
		}
	},
};
</script>

[mriza1815]

In last nativescript-vue release, importing MapViewBase getting error. Solution is just delete this import line and use as normal