0

I have an application made with cordova and vue2-google-maps.

I have an application made with cordova and vue2-google-maps, retrieved from here: https://github.com/davidverriere/cordova-vuejs2-googlemaps

I currently have a file at scripts/vueify-build.js which contains the following:

var fs = require("fs");
var browserify = require("browserify");
var vueify = require("vueify");
var aliasify = require("aliasify");
var babelify = require("babelify");
aliasifyConfig = {
  aliases: {
    vue: "vue/dist/vue.js",
  },
  verbose: false,
};

browserify("www/js/main.js", { debug: true })
  .transform(aliasify, aliasifyConfig)
  .transform(vueify)
  .transform(babelify.configure({ presets: ["es2015", "react", "stage-0"] }))
  .bundle()
  .pipe(fs.createWriteStream("www/js/bundle.js"));

The error is generated when I do:

cordova build browser

Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\test\cordova-vuejs2-googlemaps\node_modules\babel-preset-es2015\lib\index.js while parsing file: C:\test\cordova-vuejs2-googlemaps\www\js\main.js

I really don't know what could be happening, basically what I'm trying to do is import a file to my component like this: happens on import: DirectionsRenderer

<template>
  <div>
    <button @click="agregarRutas">Agregar Rutas</button>
    <button @click="trazarRuta">Trazar las rutas</button>
    <gmap-auto-complete ref="gautocomplete" @place_changed="setPlace" />
    <gmap-map ref="gmap" :center="center" :zoom="16" style="height: 600px">
      <gmap-marker
        ref="gmarker"
        v-for="(m, index) in markers"
        :key="index"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center = m.position"
      ></gmap-marker>
      <!--  <DirectionsRenderer travelMode="DRIVING" :origin="origin" :destination="destionation" /> -->
    </gmap-map>
  </div>
</template>
<script>
import { load, Map, Marker, Autocomplete } from "vue2-google-maps";
import DirectionsRenderer from "./DirectionsRenderer";
load("", "", ["places"]);

export default {
  components: {
    gmapMap: Map,
    gmapMarker: Marker,
    gmapAutoComplete: Autocomplete,
    /*  DirectionsRenderer: DirectionsRenderer, */
  },
  data() {
    return {
      center: { lat: 14.5338661, lng: -91.5041804 },
      markers: [
        {
          position: { lat: 14.534162, lng: -91.505157 },
        },
        {
          position: { lat: 14.531586, lng: -91.503226 },
        },
      ],
      currentPlace: null,
      places: [],
    };
  },
  created() {
    console.log("Created SET");
  },
  methods: {
    setPlace(place) {
      console.log(place);
      this.currentPlace = place;
    },
    agregarRutas() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng(),
        };
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
      }
    },
    eliminarRutas() {
      console.log("eliminarRutas");
    },
    trazarRuta() {
      console.log("trazarRuta");
    },
  },
};
</script>

DirectionsRenderer.js

import { MapElementFactory } from "vue2-google-maps";

export default MapElementFactory({
  name: "directionsRenderer",
  ctr() {
    return window.google.maps.DirectionsRenderer;
  },

  events: [],

  mappedProps: {},

  props: {
    origin: { type: [Object, Array] },
    destination: { type: [Object, Array] },
    waypoints: { type: Array },
    travelMode: { type: String },
    optimizeWaypoints: { type: Boolean },
  },

  afterCreate(directionsRenderer) {
    let directionsService = new window.google.maps.DirectionsService();

    this.$watch(
      () => [this.origin, this.destination, this.travelMode, this.waypoints, this.optimizeWaypoints],
      () => {
        let { origin, destination, travelMode, waypoints, optimizeWaypoints } = this;
        if (!origin || !destination || !travelMode || !waypoints) return;
        directionsService.route(
          {
            origin,
            destination,
            travelMode,
            waypoints,
            optimizeWaypoints,
          },
          (response, status) => {
            if (status !== "OK") return;
            directionsRenderer.setDirections(response);
          }
        );
      }
    );
  },
});

my package.json

{
  "name": "cordova-vue-map",
  "version": "1.0.0",
  "description": "A mobile app for displaying map from cordova",
  "main": "index.js",
  "dependencies": {
    "aliasify": "2.1.0",
    "babel-runtime": "6.20.0",
    "css-loader": "0.26.1",
    "marker-clusterer-plus": "2.1.4",
    "vue": "^2.6.14",
    "vue-hot-reload-api": "2.0.6",
    "vue-resource": "~1.0.3",
    "vue-template-compiler": "^2.6.14",
    "vue2-google-maps": "^0.4.7",
    "vueify": "~9.4.0"
  },
  "author": "David Verrière",
  "license": "Apache version 2.0",
  "devDependencies": {
    "@babel/preset-env": "^7.18.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "cordova-android": "^10.1.2",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-whitelist": "^1.3.5"
  },
  "cordova": {
    "platforms": [
      "android",
      "browser"
    ],
    "plugins": {
      "cordova-plugin-whitelist": {}
    }
  }
}
2
  • check out stackoverflow.com/questions/54285214/… Commented May 31, 2022 at 15:38
  • @Eric Thanks for answering. But I am not using gulp, I am using browserify. Commented May 31, 2022 at 16:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.